Server Side Rendering with Vue.js 3
Summary
TLDRIn 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
đ 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.
đ ïž 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.
đ§ 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.
đ 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.
Mindmap
Keywords
đĄVue 3
đĄServer-Side Rendering (SSR)
đĄExpress
đĄWebpack
đĄVue CLI
đĄWebpack Manifest Plugin
đĄNode Externals
đĄCode Splitting
đĄVue Server Renderer
đĄSSR Manifest
đĄEnvironment Variables
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
Voir Plus de Vidéos Connexes
Why did OpenAI move from Next.js to Remix?
SSR, CSR, SPA, PWA
Asp.Net Core Web API Client/Server Application | Visual Studio 2019
How to run your own local Telegram Bot API server in Python [PTB v13]
What's new in React 19 | Lydia Hallie
â Cloudflare Workers as a Web Server (with Webpack) #serverless (lesson 2)
5.0 / 5 (0 votes)