Let's SSR
with JS and Vue.js
Cesar Guerrero
Front End Developer
@mono_guerin
What is SSR?
-
SSR stands for Server Side Rendering.
-
"Process run on the server that returns a dynamically created HTML file that will be the response of a web request."
-
Can be achieved using different languages and technologies like PHP, JAVA, .NET, Javascript...
SSR - Front End Context
-
Ability to render Javascript applications on the server normally using Node.js.
-
One of the greatest strengths of frameworks/libraries like React, Angular 2+, and Vue.js.
JS Fatigue
How websites works?
www.awesomepage.com
www.awesomepage.com
/about
/portfolio
/services
/contact
So what's the problem?
SPA
Single Page Application
awesomepage.com
/#about
/#portfolio
/#services
/#contact
index.html
Bad for SEO/Social Sharing
-
One page
-
Crawlers don't understand/load javascript
-
Not dynamic (same meta tags for all pages)
Bad for performance*
-
Too much processing in the client side for rendering.
-
Possible blank pages.
-
Possible flickering pages.
-
Slow internet connections will take a lot to the FCP.
SSR to the rescue*
How do we SSR with Vue.js?
- Use Nuxt.js
- Use Quasar framework
- Use any other boilerplates like ream
- Build your own checking the docs at ssr.vuejs.org
www.awesomepage.com
/about
/portfolio
/services
/contact
Now with content!
*can be slower
Pros
- Helps with dynamic content SEO.
- Helps with social sharing and link previews as created the meta tags dynamically.
- Can help with performance.
- Recommended for e-commerce and blogs.
Cons
- Can be difficult to setup.
- Needs knowledge of devOps.
- Hostings that run Node.js are expensive.
- Consider Pre rendering first.
Relevant Links
Thanks!
