Server Side Rendering with Vue.js 3

Summary

In this tutorial, the YouTuber dives into Vue 3's server-side rendering capabilities using the raw API. The goal is to create a Vue 3 application with the Vue CLI, render it on a server, and explore concepts with tools like Express and Webpack. The script guides through setting up an Express server, configuring Webpack for SSR, and using Vue's new APIs for SSR apps and rendering to string. The process involves building the app for Node.js, handling static files, and integrating the server-rendered HTML with client-side JavaScript, culminating in a fully server-rendered Vue 3 application.

Takeaways

• 😀 The video is a tutorial on experimenting with Vue 3's server-side rendering (SSR) features using the raw API.
• 🛠️ The goal is to create a Vue 3 application with the Vue CLI and then render it on a server using Express and Webpack.
• 📝 The presenter emphasizes focusing on concepts rather than building a complete SSR solution.
• 💻 The process starts by setting up an Express server and creating a basic server.js file to handle HTTP requests and responses.
• 📥 The tutorial includes installing necessary packages like Express and Webpack Node Externals.
• 🔧 Configuration of Webpack is detailed, including setting the target to Node.js and adjusting the output library target.
• 📝 Use of Webpack Manifest Plugin is highlighted to track emitted files, which is crucial for SSR.
• 🚫 Disabling certain Webpack optimizations like code splitting and compression for SSR is discussed.
• 🔄 The presenter shows how to modify the Vue CLI's webpack configuration for SSR by setting environment variables and using an allow list.
• 🌐 The video covers using Vue 3's new APIs for SSR, such as `createSSRApp` and `renderToString`.
• 🔧 The tutorial explains how to adapt the main.js file for SSR by creating a `main.server.js` and adjusting the Vue CLI configuration.
• 🔄 The importance of serving static files like CSS from the Express server and using the manifest to locate them is covered.

Q & A

What is the main goal of the video script?

The main goal of the video script is to create a Vue 3 application using the Vue 3 CLI and then render that app on a server using server-side rendering (SSR) with the help of Express, Webpack, and Vue 3's SSR features.

What is the first step in setting up the server for SSR in Vue 3?

The first step is to install Express using npm i express and then create a new file called server.js to start setting up the server using Express.

Why is a new build required for SSR in Vue 3?

A new build is required for SSR because the application needs to be built in a way that it's compatible with Node.js, which involves setting specific Webpack configurations for server-side rendering.

What is the purpose of creating a view config.js file in the context of SSR?

The view config.js file is created to customize the Webpack configuration for SSR, including setting the target to Node.js, defining the library target, and using plugins like webpack-manifest-plugin to manage the emitted files.

What is the role of the webpack-manifest-plugin in the SSR build process?

The webpack-manifest-plugin is used to create a manifest file that lists all the emitted files by the Webpack build process, which is instrumental for referencing the correct files in the server-side rendering setup.

Why is the 'ssr' environment variable set in the Webpack configuration?

The 'ssr' environment variable is set to indicate that the Webpack build is for server-side rendering. It helps in conditionally applying SSR-specific configurations.

What changes are made to the Webpack configuration to disable browser-specific optimizations?

To disable browser-specific optimizations, the splitChunks and minimize options are set to false in the Webpack configuration, as these are not needed for Node.js server consumption.

How is the Vue 3 application prepared for SSR in the server.js file?

The Vue 3 application is prepared for SSR by using the createSSRApp function from Vue, which is then used to create an SSR application instance. The renderToString function from vue-server-renderer is used to render the app content as a string.

What modifications are made to the main.js file to accommodate SSR?

The main.js file is modified by removing the createApp and mount logic and instead exporting the app instance directly. This is because the SSR setup uses createSSRApp, which is incompatible with the createApp and mount approach.

How are static files like CSS and JavaScript handled in the Express server for SSR?

Static files are handled by using the express.static middleware in the Express server, which serves the files from the 'dist' folder for each file type (images, JavaScript, CSS, etc.).

What is the final step to verify that the SSR setup is working correctly?

The final step is to start the server and check the browser for the rendered application. Additionally, inspecting the network activity in the browser's developer tools to ensure that the server is sending the correct HTML response.

Outlines

00:00

😀 Introduction to Vue 3 SSR Experiment

The script begins with an introduction to an experiment using Vue 3's server-side rendering (SSR) features. The goal is to create a Vue 3 application using the Vue CLI and render it on a server with the help of Express and Webpack. The focus is on exploring SSR concepts rather than building a complete SSR solution. The process starts by setting up a new Vue 3 application and installing Express to create a basic server that serves HTML content. The server is tested by running it on localhost:8080.

05:01

🛠️ Setting Up the SSR Build Configuration

The second paragraph delves into configuring the build process for SSR. It involves creating a 'vue.config.js' file to customize the Webpack configuration for server-side rendering, including setting the target to Node.js and adjusting the library target to commonjs2. The use of Webpack Manifest Plugin is introduced to track emitted files. Additionally, the script covers the installation and configuration of 'webpack-node-externals' to handle external dependencies and disabling certain Webpack optimizations that are unnecessary for SSR, such as code splitting and minification.

10:02

🔧 Integrating Vue 3 SSR APIs and Server Rendering

This paragraph explains the process of integrating Vue 3's SSR APIs into the server setup. It starts with importing the necessary modules from Vue and setting up the server to consume the built application files, which are identified through the 'ssr-manifest.json'. The script discusses the use of 'createSSRApp' and 'renderToString' functions to create a server-side rendered application and render the app content to a string, respectively. It also touches on the incompatibility between the SSR APIs and the standard Vue mounting process, necessitating changes to the 'main.js' file for SSR compatibility.

15:05

🌐 Finalizing the SSR Setup and Testing

The final paragraph wraps up the SSR setup by focusing on serving static files and rendering the application content with CSS. It describes configuring the Express server to serve static files from the 'dist' directory and modifying the 'main.server.js' to export the app correctly for SSR. The script concludes with running the server, testing the SSR functionality in the browser, and ensuring that the rendered HTML is received from the server. The video script ends with a call to action for viewers to like, share, and subscribe for more content.

Keywords

💡Vue 3

Vue 3 is the latest major version of the Vue.js framework, a progressive JavaScript framework for building user interfaces. It is known for its simplicity and flexibility. In the video, Vue 3 is the core technology being explored, with the script focusing on creating an application using its server-side rendering features.

💡Server-Side Rendering (SSR)

Server-Side Rendering refers to the process of generating HTML on the server and sending it to the client, which improves the initial load time and SEO performance. In the video, the creator is experimenting with Vue 3's SSR capabilities to render the application on a server using Express.

💡Express

Express is a minimal and flexible Node.js web application framework that provides a robust set of features for building single and multi-page, and hybrid web applications. The script mentions using Express to set up the server for the Vue 3 application's SSR.

💡Webpack

Webpack is a static module bundler for modern JavaScript applications. It is used to bundle JavaScript files for use in a browser, and it can also transform, bundle, or package other web resources. The video discusses configuring Webpack for SSR by setting the target to Node.js and using plugins like Webpack Manifest Plugin.

💡Vue CLI

Vue CLI is a command-line tool for scaffolding Vue.js projects. It provides an easy way to start new projects with pre-configured build setups. The script refers to using Vue CLI to create a new Vue 3 application and to build the project for SSR.

💡Webpack Manifest Plugin

The Webpack Manifest Plugin is used to create a manifest of all the files emitted by the Webpack build process. In the video, it is used to track the files generated for SSR and to customize the output filename to 'ssr-manifest.json'.

💡Node Externals

Node Externals is a Webpack concept that allows you to mark certain modules as externals, which means they won't be bundled into the final bundle but will be required at runtime from the node_modules directory. The script mentions adding 'node-externals' to prevent bundling of certain dependencies.

💡Code Splitting

Code Splitting is a feature of Webpack that allows you to split your code into various bundles which can be loaded on demand or in parallel. The script discusses disabling code splitting for SSR, as it is not needed in a Node.js server environment.

💡Vue Server Renderer

Vue Server Renderer is a package provided by the Vue.js framework that enables rendering a Vue application to HTML on the server. The script includes using 'vue-server-renderer' to render the Vue 3 application to a string that can be sent as HTML.

💡SSR Manifest

The SSR Manifest is a file generated during the Webpack build process when SSR is enabled. It contains information about the application's JavaScript files, which are necessary for SSR. The video script describes using the 'ssr-manifest.json' to determine the correct entry file for the server.

💡Environment Variables

Environment variables are dynamic-named values that can affect the way running processes will behave on a computer. In the video, setting the 'SSR' environment variable to '1' triggers the SSR build process for the Vue 3 application.

Highlights

Experimenting with Vue 3's server-side rendering features using the raw API for a fun and educational experience.

Creating a Vue 3 application with Vue CLI and exploring server-side rendering with Express and Webpack.

Building a server with Express and setting up server-side rendering by creating a server.js file.

Using the Vue 3 preview to start a new Vue 3 application and discussing the importance of server-side rendering.

Creating a new build for Node.js consumption and the significance of Webpack configuration for SSR.

Utilizing the Webpack Manifest Plugin to extract emitted files for SSR.

Setting up the environment variable 'ssr' to customize the Webpack configuration for server-side rendering.

Installing and configuring Webpack Node Externals to optimize the build process for SSR.

Disabling browser-specific optimizations like code splitting and compression for Node.js server consumption.

Investigating and disabling specific Vue CLI plugins to tailor the build for server-side rendering.

Building the application with the 'ssr' environment variable set to enable SSR build process.

Consuming the built files in Node.js and using the SSR manifest to understand the file structure.

Introducing two new APIs in Vue 3 for SSR: createSSRApp and renderToString.

Using createSSRApp to create a server-side rendered application and comparing it with the standard createApp.

Rendering the Vue 3 application to a string using renderToString for server-side rendering.

Modifying main.js to work with server-side rendering by creating main.server.js.

Adjusting the Webpack configuration to use the new main.server.js entry point.

Serving static files using Express for CSS and other assets to complete the SSR setup.

Successfully rendering the Vue 3 application on the server and viewing the HTML output.

Addressing the issue of missing CSS and linking the stylesheet using the manifest file.

Transcripts

youtubers join me today

and experimenting with the latest vue 3

server side

rendering features this is going to be a

fun experiment

with the raw api so come along

so our goal for today is to create a

view 3 application with u3 cli

and then we are going to render that app

on a server

we are also going to use express and

webpack and a lot of terminology

my goal is to say focus so i'm not going

to build the entire server side

rendering solution

i only want to explore the concepts okay

so let's get started by creating a new

view 3 application

i'm using view 3 preview

okay we are done jimmy and this is our

regular view 3

application i suggest that we start by

creating the server because this is

server side

rendering so let's create the server i'm

going to use express

and to start using this i'm going to

have to install it first npm i

express and now i can create a new file

i'm gonna call it server.js

okay let's start with these with the

servers so first

thing first i gotta require express

and then i'm going to instantiate a new

server server

is going to be new express okay

and now i'm going to work with path so

i'm going to use any path server

and get any path so that's going to be

any

the usual request response

and then that's a new function i'm going

to create some html

const html is and i have some html ready

that's it and now i need to response and

with html finally i gotta listen

server dot listen on board 88

okay so we have our server okay just to

prove that the server is running

i'm going to launch it in localhost 8080

and it's sending hello

now comes the hard part we need to

create

a new build in a way that it's built for

node.js

this is going to be very interesting if

you're into learning

about how things work underneath i'm

going to create a new

file view config.js

so one of the exports i need to add

is chain webpack this is going to be a

function

and the argument i'm going to call

webpack config this is not a raw

webpack config it's mostly abstracted

well the first thing i want to do

is i want to know that this is actually

server

side rendering i'm going to call this

environment of variable ssr

okay if it's not set then just don't do

any of these

customization and the first thing we are

doing we need to

set webpack configuration and it needs

to target node.js

target is node another very important

thing to do

is setting the library target so output

dot library target is going to be common

js2 there is a lot of information in the

webpack build but there's also

a way to extract all the emitted files

and

this is going to be instrumental for a

cause

okay so we're gonna be using the webpack

manifest plugin okay so i'm going to

install that first

and as i know it's being installed i'm

going to

import it into this file as well const

manifest plugin is webpack

manifest plugin a lot of typing i know

okay in here i need to say config

plugin i'm going to give it a name for

every plugin that i add or that we add

we also give it an identifier or name if

you will so this is going to be my

manifest

name and i'm going to use new

manifest plugin we can just use this

plugin without any configuration but i

can also show you that

there is useful information that we can

be using with this

plugin and the most useful things for

now

is going to be the file name option and

here's why

manifest.json is something that

our view3 cli is going to create for

pwa progressive web app so we're going

to change the file name from

manifest.json

okay and this is the option file name

ssr

manifest now we know what this file is

actually for

and this is the first difficult thing

the second thing is going to be adding

node externals

so webpack config.externals

and i'm going to need to set it up there

is the library for that too and it's

called

npmi webpack node

externals that's it and now i can close

the terminal for a little while

so we have more room on this side i'm

gonna need to import

node externals so we are going to use

directly like so okay if we go to the

view server side rendering guide and

this is the guide for

vue version 2 we are going to notice

that they do the same thing as the

externals are node

externals the same plugin right here

node externals and say and this says do

not

externalize dependencies that need to be

processed by webpack

okay do not externalize means

internalize

and you can add more file types here

like

view files so let's just add this

whitelist

css or you know what else we can do

we can say css or view

this is good we're making good progress

and now we are going to need to disable

something so obviously

optimizations we don't need to optimize

this for the browser for the consumption

in the browser and across the internet

this is going to be locally consumed in

a node.js server

so why don't we just disable things like

um

compression makes sense right webpack

config again

dot optimization split chunks

is going to be well false because we

don't need code splitting so much in

node.js and minimize is going to be

false as well

so i don't want any compression to

happen for this to be successful i had

to investigate

the plugins that are used by vue cli

and i'm going to disable a view namely

delete

hot module replacement i'm going to copy

this line a few times because i'm going

to be

replacing a few more preload okay

and then prefetch all this is

useful for the browser progress okay

let's make things simple and friendly

errors yeah i don't need that i'm going

to give you a little secret if you

ever want to see what this webpack

config

or chain webpack config is going to look

like in

webpack then you can actually output it

console.log

okay webpack config dot to config

and this is going to spit out the entire

config i'm going to comment this out

because we don't need to

bother with that but this could be uh

useful for you to debug stuff and maybe

you're just interested in learning about

webpack and let's give this a try and if

this is successful

then the application is going to be

built for the server

if you remember we need to set the ssr

environmental variable

and i can do that by setting ssr to for

example one

and then i'm going to just build as

usual npm run build

okay and this is our first issue and

honestly you know

this is me copy pasting from view too

and obviously i copied

this white list config but meanwhile

this was changed to allow list

let's do this again ssr is one npm run

build

and there it is beautiful so i have

app.js

and app.css what if i didn't set

npm run build no ssr let's test this out

and now i have chunk vendors

in the app you see how code splitting is

working because now we have a new

chunk that's a result of code splitting

that's the optimization that i was

telling you about split chunks so split

chunk is going to work

when we just run npm run build but if

you run this with

ssr equals one and then npm run build

then vendors is going to be bundled

inside the app.js

and now we need to consume this in node

so take a look at the dist folder and we

see

ssr manifest you see all the files that

were

created we are going to focus on these

two now going back to the server

i'm going to close the terminal again

going up

for this to work we're going to be

working with two new

apis that come with view three

okay the first one is going to be create

a server-side rendering application or

create ssr app that's the first one

the second one is going to be

render to string because we are going to

be consuming strings

to send that as html

okay create ssr

app and that comes with

require view

and create ssr app looks very similar

to create app you see create app view

create app dot mount application

we are just not going to be mounting but

we are going to be creating we create

app that we import um then we need to

import the app.js obviously how do we do

that

we don't know the name of appgs because

app.js is just app.then hash.js

how do we know which hash that's going

to be exactly

ssr manifest app.js becomes

that file so we need to import the ssr

manifest.json

into our server.js okay

manifest is going to be required

okay dist and then ssr manifest

json okay now we need to import the app

from

manifest but let's see what it is const

app

path okay is manifest

let's get back to ssr manifest to see

that app.js

dot well i can't say dot

app.js okay

this is the path however as you see this

is slash js

slash app okay what i'm worried about is

slash

js so i need to properly consume the

path

i need to make sure that this is going

to be under the distribution of this

folder

and not the root of my computer

for that we use i like to put path in

the front path is going to be require

path so just before manifest i'm going

to write path

dot join i'm going to say this current

directory

their name and then go back to this

or distribution this folder and then

join

the manifest.app.js and close that

function call and now i'm going to

require it

app is require app path

and i'm going to be using the default

export somehow while i was writing

vs code included path for me but i did

that manually

without seeing that okay what do we do

with the app

we create an ssr app of course

const and then app now lowercase app

is going to be create ssr app app let me

show you

why we are doing this let's compare with

main.js you see import app

from app create app okay we are doing

the same thing

we are importing app and we're creating

it's not just app it's server-side

rendered app

and we put that inside the app reference

so with this we created the application

but we haven't

rendered yet for this we are going to be

using the server

renderer that does all the work

for us in the background it's so smart

and it's so unbelievably fast

we need to do two things close this

because

so much mess second thing we are going

to

be importing this or installing first

npm

i view server renderer as this is being

installed i'm going to require it right

away

right under requiring view

okay render to string

is going to come from view

server render

okay this is all i needed and it

installed i'm going to

close this for now render to string i'm

going to use now

app content is render to string

app as simple as that let me tell you

there's a lot of stuff

that happens underneath the hood in

render 2

string but eventually i'm going to get a

string of app content

and put it right here instead of

hello this is going to be my app content

but here's the catch

because we use create ssr app

in server.js can we

also use create app can we also use

mount now this is incompatible

so we need to change the main.js

logic so it doesn't do all that okay

create app with dot mount that doesn't

work with create ssr

app so i'm going to copy and paste okay

may not copy i'm going to name it main

dot server okay main.server

i'm going to remove create app

and remove this line and all i need

is to just to pass app.view okay

export default app

all i ever needed but i need to tell

viewconfig

how to use that main.server i'm going to

go to the top because

that deals with webpack config

entry and this entry point is called app

clear the existing value and add

source main server dot yes

okay this is not actually the same main

dossier dodge yes

okay and if i go to the terminal again

i'm gonna

use ssr npm run build

let's see what happens good goody goody

and now time for the truth server

whoops node server okay

going back to the browser i'm going to

hello world

reload and yes i see object promise

you know why i see object promise

because because this

is a promise render to string is an

asynchronous code

so this is going to be an async function

app content is a way to render to stream

okay let's do that oh

well we don't have to do that all over

again just node server go back let's see

does this work

yes that works ha

okay it kind of kind of works you know

we don't have any css

but i think by now you already figured

this out and you know

where to find the css so that's going to

be a link

and then that means it's a style sheet

right

and then we have some kind of href or

position of it

okay and then it comes from the manifest

manifest

and that's going to be have.css and we

can close this

proper now we need to tell express

server

to use these static files as statics

so for every folder that we have here

server

dot use image and that's express static

okay path join directory name

and that's going to be distribution or

dist

image and i'm going to replicate that a

few times

okay and we have it for image and i'm

going to have for js

and i'm going to repeat that for css

and one more favicon.ico

all right and this is this is it i'm

gonna save this

and start the server again

let's test this out

that is it finally you know let's verify

you know elements obviously but if i

reload again go to network

go to localhost and preview this is good

response we actually do get

html from the server wow

if you think this is rewarding for you

and for your friends feel free to share

it

like it subscribe that little bell icon

and all that stuff

thank you for sticking with me and see

you again soon