Home
Jamstack Explorers
Menu

Next.js from the Ground Up with Cassidy Williams

Next.js Server-Side Rendering

In this stage, we'll talk about how fallback works in Next.js with dynamic routes, and how to toggle server-side rendering with it.

Transcript:

[00:00:00] In the previous video, I talked about a little thing called fallback in Next.js when we're using the getStaticPaths function [00:00:10] in a dynamic route. Now, by default, you can use fallback as false, and that just means that whenever a route isn't defined, it will 404, [00:00:20] but what you can do is turn fallback to true. This completely changes the behavior of Next.js and what it does. When [00:00:30] fallback is true, the paths that are returned from getStaticPaths will be rendered to HTML at build time. The paths that have not been generated will not [00:00:40] result in a 404 page. Instead, something will happen at runtime for the users. Depending on the host that you use, depending on the method that you use, that can do [00:00:50] different things. On Netlify, however, that turns this entire page component into a server-rendered component. [00:01:00] By switching to fallback is true, this does not work on the next export version of your Next.js applications, so you can't do a truly statically generated application with that. [00:01:10] You can definitely have statically generated parts for your applications, but this component specifically will not be statically rendered. [00:01:20] If you'd like to see an example of this, I actually have a project that I built that was a pranking application. Now, in this app, I have a page where it's news and then article.js. [00:01:30] My getStaticPaths, I don't actually have any preset paths, so my paths' variable is just an empty array instead of a populated one like in our other application, [00:01:40] and then fallback is true. Then, for the rest of these, in the parameter, I get the article that I pulled from the URL, and that's actually a title and it's a [00:01:50] fake news article. If we were to look at this in the browser, the way the application works is I can say, 'Explorers Save the [00:02:00] World'. Then, when I go to that route, it's a little prank where I'm not going to play a RickRoll video, but it's an article that says, 'Explorers Save the [00:02:10] World, Not'. Then, I actually hacked together the Next.js head API to make it look like a real article when it's shared on social media [00:02:20] when it really is not. It's a fun little prank thing that shows the usage of these kinds of dynamic routes where no paths are predefined [00:02:30] at all, but we still want to use whatever paths could be after this whole news part in the path of the URL. [00:02:40] If in your applications, if you were to do something in this Pokemon application or in any of your other applications, if you want to server render routes or if you want to use anything that isn't necessarily supported by [00:02:50] statically exporting your application, you can start with this fallback is true, which will vary depending on the host that you use, or you can use something like getServerSideProps [00:03:00] and getServerSidePaths, which is something that we support at Netlify, but I personally recommend that you go with the static side of things, because that's the direction that the framework is going in.

Explorers

your progress

810