14 - Next.js.

Speck Academy 2021

Features

SSR vs CSR

CRA (Create React App) vs Next.js

Next steps

​

​

​

​

1

2

3

4

Overview

1

Features

Features

​

Next.js is framework built on top of React. It gives you the best developer experience with all features you need for production.

Why choose Next.js?

• Image optimization
• Internationalization
• Hybrid: SSG and SSR
• Incremental static regeneration
• File-system routing
• Built-in CSS support
• TypeScript, API routes, Code-splitting & bundling, Fast-refresh, Zero config, Next.js analytics

​

​

​

​

​

Features

​

Image optimization

• Built-in Image component based on img HTML tag.
• Automatic image optimization allows for resizing, optimizing, and serving images in modern formats like WebP when the browser supports it.
• Image optimization is performed on de-man, as user request them.
• Images are lazy loaded by default, and you can specify device and image sizes that you want to display.

​

​

​

​

​

Features

​

Internationalization

• Built-in support for internationalized (i18n) routing.
• You can provide a list of locales, the default locale and domain-specific locales and Next.js will automatically handle the routing.
• Sub-path routing:
• /blog
• /fr/blog
• Domain routing:
• example.com/blog
• example.fr/blog

​

​

​

​

​

Features

​

Hybrid: SSG and SSR

• Two types of pre-rendering that can be combined.
• SSG (Static Site Generation): happens in the build time on the server side, used for static pages, but also can be used for blogs or other content that comes from other data source (frequently run build in order to see new content).
• SSR (Server Side Rendering): During the request, requested page is built on the server side and served to the client in HTML, CSS and JS files (static content).

​

​

​

​

Features

​

Incremental Static Regeneration

• Add and update statically pre-rendered pages incrementally after the build time.
• It eliminates need to manually run builds when content changes comparing to SSG.
• When a request is made to a page that was pre-rendered at build time, it will initially show the cached page. After the revalidation period, the next request will still show the cached (stale) page but then Next.js triggers regeneration in the background and if page is successfully generated, updated page will be shown, if not, old page remains unaltered.

​

​

​

​

Features

​

File-system routing

• Next.js has a file-system based router built on the concept of pages.
• When page is added to the pages/ directory it’s automatically available as a route.
• The router supports nested files. If you create a nested folder structure files will be automatically routed in the same way still.
• For dynamic routes you can use bracket syntax: pages/blog/[slug].js
• Next.js provides us Link component for routing: �<Link href=”/blog/slug”>Some blog post</Link>

​

​

​

​

Features

​

Built-in CSS support

• Next.js supports CSS modules using the [name].module.css file naming convention (we don’t need to worry about the collisions), local scoped styles instead of global scope.
• Sass support (sass needs to be installed)

Many more features that you can find here:

• TypeScript, API routes, Code-splitting & bundling
• Fast-refresh, Zero config, Next.js analytics

​

​

​

​

2

SSR vs CSR

SSR vs CSR

​

SSR (Server Side Rendering):

• When a user makes a request to a webpage, the server prepares an HTML page by fetching user-specific data and sends it to the user’s machine over the internet.
• The browser then constructs the content and displays the page

CSR (Client Side Rendering):

• New approach to rendering websites, become popular when JavaScript libraries started incorporating it. Rendering content in the browser using JS.
• Instead of getting all the content from the HTML document itself, a bare-bones HTML document with a JS file in initial loading itself is received, which renders the rest of the site using browser.

​

​

​

SSR vs CSR

​

​

​

​

​

SSR vs CSR

​

​

​

​

​

SSR vs CSR

​

SSR vs CSR:

• The main difference is that for SSR your service response to the browser is the HTML of your page that is ready to be rendered, while for CSR the browser gets a pretty empty documents which links to your JS.
• That means your browser will start rendering the HTML from your server without having to wait for all the JS to be downloaded and executed.
• In both cases, React will need to do downloads and go through the same process of building a virtual DOM and attaching events to make the page interactive but for SSR, the user can start viewing the page while all of that is happening.
• For the CSR world you need to wait for all of the above happen and then the virtual DOM is moved to the browser DOM for the page to be viewable.

​

​

​

SSR vs CSR

​

SSR pros:

• Search engines can crawl the site for better SEO.
• The initial page load is faster.

SSR cons:

• Frequent server requests
• Full page reloads
• Non-rich site interactions

​

​

​

​

SSR vs CSR

​

CSR pros:

• Rich site interactions.
• Fast website rendering after the initial load.

CSR cons:

• Low SEO if not implemented correctly.
• Initial load might require more time.

​

​

​

​

3

CRA (Create React App) vs Next.js

CRA (Create React App) vs Next.js

​

CRA:

• Use CRA to build applications only accessible to the authenticated users.
• Hosting of CRA is usually cheaper.

Next.js:

• Use Next.js for landing/marketing focused pages and e-commerce sites.
• Use Next.js when SEO matters.

​

​

​

4

Next steps

Next steps

​

Since we’ve finished all of the lectures, my advice for you is to start learning TypeScript and Next.js.

TypeScript can be used in both, React and Next.js apps and is almost must-have skill that every frontend developer must understand.

Next.js is almost similar to the React and in some cases you’ll need to create applications that are visible by search engines. In that case you’ll use Next.js (not always, but in most of the cases).

Since you understand React basics, you’ll be able to take that journey by yourself, Good luck! :)

​

​

​

​

​

5

Teamwork

Teamwork

Status of team projects

​

​