DEV Community

Raymon Schouwenaar for Mr Frontend

Posted on • Originally published at Medium on

5 1

Introduction to SSR with NextJS and NuxtJS

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.


SurveyJS custom survey software

Simplify data collection in your JS app with a fully integrated form management platform. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more. Integrates with any backend system, giving you full control over your data and no user limits.

Learn more

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay