Introduction to SSR with NextJS and NuxtJS

Image for post
Image for post

At the moment there is a lot talking about SSR (Serverside rendering) applications. SSR is most used in combination with frameworks like React or Vue. For React there is NextJS and VueJS has NuxtJS.

Check my experiment with the new Mr Frontend Blog with NextJS and the WordPress API!

So no JavaScript teaching today, but an introduction to NextJS!

NextJS

NextJS is a JavaScript framework for NodeJS, build on top of React. NextJS is super easy to use!

Most people know and use React as a client-side application. But with NextJS all the React Components are rendered by NodeJS on the server and then served to the browser. With client-side rendering, the browser downloads the JavaScript and other assets and then renders the view when that is finished.

SSR & CSR

SSR and CSR have both pros and cons, explained in the “The Benefits of Server Side Rendering Over Client Side Rendering”.

At the moment I’m experimenting with NextJS and using the WordPress API on Heroku, to experiment with a new design for the Mr Frontend Blog. If you want to try it out for free on Heroku, please check out this starter project on Github for running NextJS on Heroku.

NuxtJS

If you prefer VueJS more than React, please checkout NuxtJS. NuxtJS is similar to NextJS, both are rendering their components serverside with NodeJS. I didn’t try NuxtJS, but it looks almost as awesome as NextJS. Maybe I will try it later 😎.

What do you think about it?

I’m wondering what you think about SSR or CSR and both the pros and cons. Or do you see something usefull for NextJS or NuxtJS?

Please let me know in the comments 😉

Originally published at Mr Frontend Blog.

Written by

I write stories about Frontend Dev, JavaScript, Typescript, Angular, NodeJS, Serverless Functions, JAM Stack, FaunaDB, Netlify, Apple, iOS— https://byrayray.dev

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store