You don't want to Server-side Render your Next.js App

Rate this content
Bookmark

Next.js is a fantastic framework; it provides many unique features, helping you build any web application effortlessly. But when it comes to choosing the right rendering strategy for your pages, you may face a problem; how should I render them? Should I statically generate them at build time? Should I server-side render them at run-time? Well, the answer is surprising. server-side rendering is rarely the best option, and let's explore why (and how to solve this problem!)

This talk has been presented at React Summit 2022, check out the latest edition of this React Conference.

FAQ

Next.js is a React framework that enables functionalities such as server-side rendering and static site generation, allowing for better performance, SEO, and more secure applications. It handles page transitions without needing a page refresh, making applications feel more like native apps.

Client-side rendering in Next.js allows for dynamic interaction without page refreshes, reduced server load, and scalability since static assets can be hosted on a CDN. It's particularly beneficial for apps that require frequent UI updates without server interaction.

Server-side rendering (SSR) in Next.js processes HTML content on the server before sending it to the client, improving initial load times and SEO. SSR can also enhance application security through server-side cookies and reduce the risk of client-side data exposure.

Static site generation (SSG) pre-renders pages at build time, serving them as static HTML files. This method provides high performance, security, and reliability, as the pre-rendered pages can be distributed globally via CDNs, minimizing server load and response times.

Incremental static regeneration (ISR) allows pages rendered using static site generation to be updated in the background at runtime. This technique provides the benefits of static generation with the flexibility to update content when needed without rebuilding the entire site.

Hybrid rendering in Next.js allows developers to choose the appropriate rendering method for each page or component. This flexibility can optimize performance and user experience by combining static generation, server-side rendering, and client-side rendering as needed.

While server-side rendering improves SEO and load times, it can lead to increased server workload, higher maintenance costs, and the need for more powerful server infrastructure to manage rendering processes effectively.

The speaker suggests avoiding server-side rendering due to its inefficiency in handling JSX, high server demands, and the significant costs associated with scaling server resources to meet application demands.

Michele Riva
Michele Riva
28 min
21 Jun, 2022

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Next.js is a framework that allows for client-side rendering and easy page transitions. Server-side rendering offers a more secure application and better search engine optimization but requires a server. Static site generation provides outstanding performance and scalability but has limitations. Incremental static regeneration solves the problem of rebuilding the entire website. Choosing the right rendering strategy depends on the specific scenario, and for e-commerce websites, static site generation with incremental static regeneration is recommended.

1. Introduction to Next.js and its Benefits

Short description:

Hello, everyone! I'm Michele, a senior software architect at NearForm, and the author of Real-World Next JS. NearForm is a professional services company specializing in Node.js, React, Next.js, TypeScript, and maintaining open-source packages. Now, let's dive into Next.js. It's a beautiful framework that allows for client-side rendering, providing a native app-like experience with easy page transitions and lazy loading of components. Plus, it doesn't require a server if you don't need one.

Hello, everyone, and welcome to my talk, You Don't Want to Serve a Set Renderer, Your Next JS App. Before we start, let me please introduce myself really briefly. I am Michele. I work as a senior software architect at NearForm. I'm a Google developer expert and a Microsoft MVP. I am also the author of Real-World Next JS, which is a book that, as you may guess, talks about Next.js. So if after the talk you'd like to hang out and talk about Next.js, please feel free to reach out. I'd be glad to talk with you.

A couple of words about NearForm. We are a professional services company, and we're specialized in Node.js, React, Next.js, TypeScript, and whatever. We are maintaining a lot of open-source packages that get downloaded 1.2 billion times per month cumulatively. So if you're looking for a remote-first job and you're really committed to open source, please feel free to reach out. I'd be glad to introduce you to the company.

But that's not why we are here, so let's talk about Next.js. First of all, what is Next.js? Why do we want to use it? And why is it so beautiful? When React started to be a thing, we only had client-side rendering basically. So that was the norm. We basically generate a big bundle and serve it over the net. This bundle will contain the whole application and as soon as it gets transferred to the browser, the browser will read the file, the JavaScript file, execute it, and we'll have the DOM ready to be browsed.

So basically, the problem with this approach, but we will see many problems later on, is that this is what we see when we first download the bundle. So while it's downloading, while it's executing, we see a spinner. After several seconds, we will see the complete page ready to get browsed. So this approach has some cons and has some pros. So let's see why it might be a good or a bad choice. So first of all, it makes you feel your app, like it's a native application, and that's because page transitions are really easy to handle, and you don't have to refresh the page every single time. Every time you click on a button, for example, and you go to another page, you don't need a page refresh. You already have all the components you need that gets lazy loaded directly into the browser. So for example, you're in the home page, you click to read an article, the whole DOM refreshes, but the page doesn't. So the DOM React will swap the content with the new one, and will execute lazy components that haven't been executed yet during the first load. One other great thing about client-side rendering is that you don't need a server. And if you need because you already have one and you want to serve your client-side application from a server, it doesn't require much power.

2. Pros and Cons of Server-side Rendering in React

Short description:

And there's no server workload, which is pretty good because it's really easy to scale. But if you don't have a server that's still good, you can just put your files, static assets, on a CDN on S3 on AWS, for example, or using Cloudflare pages, or whatever. And you just can host an entire application directly from something that doesn't need a server at all. While this is good for many things, it also has some problems, for example, with search engine optimization. React is not particularly good for search engine optimization, especially in markets outside of Europe and America. Additionally, React has a slow initial page load time. Server-side rendering offers a different approach, providing a more secure application, compatibility for non-JavaScript users, and enhanced search engine optimization. However, it requires a server and comes with higher maintenance costs.

And there's no server workload, which is pretty good because it's really easy to scale. But if you don't have a server that's still good, you can just put your files, static assets, on a CDN on S3 on AWS, for example, or using Cloudflare pages, or whatever. And you just can host an entire application directly from something that doesn't need a server at all.

While this is good for many things, it also has some problems, for example, with search engine optimization. We all know that React, it's not particularly good for search engine optimization, which is true. But it really depends on the market you care about. For example, if you care for the European and American market, we know that Google is the number one search engine and Google today is capable of indexing React content. But there might be other search engines that are more popular in other continents, such as Asia, for example, or Africa, that does not read React generated pages. So if you truly care about those continents and markets, you should definitely look into something different for building your application.

Another con is that React is really bad for the initial page load time, as we saw. So the first time you download a bundle, you just have to wait several seconds in order to be able to browse it. So this is why we begin to see server-side rendering as a different way for approaching React rendering specifically. With server-side rendering, this is what you get as soon as you request a page. It might take a couple of seconds, because the server still needs to render the application on the server side, but eventually it will send you the complete page ready for browsing.

So this approach also has some pros and cons. Let's see them. One pro, the application might be a bit more secure. That's because you might have server-side cookies, for example, for authentication, and you don't have to share those cookies with the client, which makes your application more secure. You can hide some requests from server to server without exposing them on the client. That limits the possibility for a man-in-the-middle attack, for example. Also, you end up having more compatible websites. If you don't have JavaScript enabled, you will still see the first render for your application. Search engine optimization is enhanced thanks to server-side rendering, because you basically end up having a product which is the same that you might have with Ruby on Rails, JavaScript Boot, Laravel, or whatever. The content can be highly dynamic, and you can have that kind of dynamism directly on the server. So, depending on the user that is currently logged in, for example, you might decide to render different things directly on the server. Of course, it also has some problems. For example, a server is required. Every single request gets rendered on the server and transmitted to the browsers once rendered. So, there will be an higher server workload, higher maintenance costs, because you will have to maintain a server. And this is costly.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Simplifying Server Components
React Advanced 2023React Advanced 2023
27 min
Simplifying Server Components
Top Content
Watch video: Simplifying Server Components
React server components simplify server-side rendering and provide a mental model of components as pure functions. Using React as a library for server components allows for building a basic RSC server and connecting it to an SSR server. RSC responses are serialized virtual DOM that offload code from the client and handle interactivity. The client manifest maps serialized placeholders to real components on the client, enabling dynamic rendering. Server components combine the best of classic web development and progressive enhancement, offering the advantage of moving logic from the client to the server.
A Guide to React Rendering Behavior
React Advanced 2022React Advanced 2022
25 min
A Guide to React Rendering Behavior
Top Content
This transcription provides a brief guide to React rendering behavior. It explains the process of rendering, comparing new and old elements, and the importance of pure rendering without side effects. It also covers topics such as batching and double rendering, optimizing rendering and using context and Redux in React. Overall, it offers valuable insights for developers looking to understand and optimize React rendering.
Speeding Up Your React App With Less JavaScript
React Summit 2023React Summit 2023
32 min
Speeding Up Your React App With Less JavaScript
Top Content
Watch video: Speeding Up Your React App With Less JavaScript
Mishko, the creator of Angular and AngularJS, discusses the challenges of website performance and JavaScript hydration. He explains the differences between client-side and server-side rendering and introduces Quik as a solution for efficient component hydration. Mishko demonstrates examples of state management and intercommunication using Quik. He highlights the performance benefits of using Quik with React and emphasizes the importance of reducing JavaScript size for better performance. Finally, he mentions the use of QUIC in both MPA and SPA applications for improved startup performance.
Routing in React 18 and Beyond
React Summit 2022React Summit 2022
20 min
Routing in React 18 and Beyond
Top Content
Routing in React 18 brings a native app-like user experience and allows applications to transition between different environments. React Router and Next.js have different approaches to routing, with React Router using component-based routing and Next.js using file system-based routing. React server components provide the primitives to address the disadvantages of multipage applications while maintaining the same user experience. Improving navigation and routing in React involves including loading UI, pre-rendering parts of the screen, and using server components for more performant experiences. Next.js and Remix are moving towards a converging solution by combining component-based routing with file system routing.
React Concurrency, Explained
React Summit 2023React Summit 2023
23 min
React Concurrency, Explained
Top Content
Watch video: React Concurrency, Explained
React 18's concurrent rendering, specifically the useTransition hook, optimizes app performance by allowing non-urgent updates to be processed without freezing the UI. However, there are drawbacks such as longer processing time for non-urgent updates and increased CPU usage. The useTransition hook works similarly to throttling or bouncing, making it useful for addressing performance issues caused by multiple small components. Libraries like React Query may require the use of alternative APIs to handle urgent and non-urgent updates effectively.
Exploring React Server Component Fundamentals
React Day Berlin 2023React Day Berlin 2023
21 min
Exploring React Server Component Fundamentals
Top Content
Watch video: Exploring React Server Component Fundamentals
This Talk introduces React Server Components (RSC) and explores their serialization process. It compares RSC to traditional server-side rendering (SSR) and explains how RSC handles promises and integrates client components. The Talk also discusses the RSC manifest and deserialization process. The speaker then introduces the Waku framework, which supports bundling, server, routing, and SSR. The future plans for Waku include integration with client state management libraries.

Workshops on related topic

React Performance Debugging Masterclass
React Summit 2023React Summit 2023
170 min
React Performance Debugging Masterclass
Top Content
Featured WorkshopFree
Ivan Akulov
Ivan Akulov
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
Building WebApps That Light Up the Internet with QwikCity
JSNation 2023JSNation 2023
170 min
Building WebApps That Light Up the Internet with QwikCity
Featured WorkshopFree
Miško Hevery
Miško Hevery
Building instant-on web applications at scale have been elusive. Real-world sites need tracking, analytics, and complex user interfaces and interactions. We always start with the best intentions but end up with a less-than-ideal site.
QwikCity is a new meta-framework that allows you to build large-scale applications with constant startup-up performance. We will look at how to build a QwikCity application and what makes it unique. The workshop will show you how to set up a QwikCitp project. How routing works with layout. The demo application will fetch data and present it to the user in an editable form. And finally, how one can use authentication. All of the basic parts for any large-scale applications.
Along the way, we will also look at what makes Qwik unique, and how resumability enables constant startup performance no matter the application complexity.
Build a Headless WordPress App with Next.js and WPGraphQL
React Summit 2022React Summit 2022
173 min
Build a Headless WordPress App with Next.js and WPGraphQL
Top Content
WorkshopFree
Kellen Mace
Kellen Mace
In this workshop, you’ll learn how to build a Next.js app that uses Apollo Client to fetch data from a headless WordPress backend and use it to render the pages of your app. You’ll learn when you should consider a headless WordPress architecture, how to turn a WordPress backend into a GraphQL server, how to compose queries using the GraphiQL IDE, how to colocate GraphQL fragments with your components, and more.
Next.js 13: Data Fetching Strategies
React Day Berlin 2022React Day Berlin 2022
53 min
Next.js 13: Data Fetching Strategies
Top Content
WorkshopFree
Alice De Mauro
Alice De Mauro
- Introduction- Prerequisites for the workshop- Fetching strategies: fundamentals- Fetching strategies – hands-on: fetch API, cache (static VS dynamic), revalidate, suspense (parallel data fetching)- Test your build and serve it on Vercel- Future: Server components VS Client components- Workshop easter egg (unrelated to the topic, calling out accessibility)- Wrapping up
The Gateway to Backend: A Frontend Developer's Guide to Full-Stack Development
React Summit US 2023React Summit US 2023
160 min
The Gateway to Backend: A Frontend Developer's Guide to Full-Stack Development
Top Content
WorkshopFree
Amy Dutton
Amy Dutton
This workshop will guide you through the product development life cycle of creating a real-world web application. You will learn about React Server Components, building a design system within Storybook, and using frontend development to approach becoming a full-stack developer. The workshop will cover increasing confidence in your application with unit tests and implementing authentication and authorization. You'll have the opportunity to work through product features and examine a real-world RedwoodJS project, gaining valuable experience in real-world product development. RedwoodJS makes it simple to approach full-stack development, and this workshop will give you the skills you need to create your own real-world web applications.
Advanced Application Deployment Patterns with React Server Components (feat. a DIY RSC Framework)
React Summit US 2023React Summit US 2023
104 min
Advanced Application Deployment Patterns with React Server Components (feat. a DIY RSC Framework)
Top Content
WorkshopFree
 Greg Brimble
Greg Brimble
The developer ecosystem is always moving fast and this year has proved no exception. React Server Components can offer a significant improvement to developer experience and to application performance. But I think it's fair to say that this new server-first paradigm can be tricky to wrap your head around!In the first half of this workshop, we'll explore React Server Components from the ground-up: building our own mini meta-framework to help us understand how RSCs work. We'll discover exactly what is produced by an RSC build and we'll connect those pieces together to form a full application.Next, we'll deploy it! Cloudflare have also had a busy year too — Smart Placement, in particular, is a new technology that we've developed which fits the RSC model perfectly. We'll explore why that makes sense for our workshop app, and we'll actually deploy it onto the Cloudflare Developer Platform.Finally, we'll build out our app a little further, using D1 (our serverless SQL database) to really show off the React Server Component's power when combined with Smart Placement.You should come away from this workshop with a greater understanding of how React Server Components work (both behind-the-scenes and also how you as a developer can use them day-to-day), as well as insight into some of the new deployment patterns that are now possible after recent innovations in the platform space.