1 of 72

Intro to Next.js + Server Side Rendering

Ketan Mayer-Patel

UNC Department of Computer Science

COMP 426: Modern Web Programming (Fall 2025)

Module 3: Next.js

Lecture 12

2 of 72

Announcements

Intro to Next.js + Server Side Rendering

COMP 426: Modern Web Programming (Fall '26)

M3: Next.js

L12

!

!

3 of 72

  • Discussed the difference between multi-page applications (MPAs) and single-page applications (SPAs).
    • In MPAs, when we load a new page, the existing HTML / CSS / JS is wiped off the client and the entire application is re-downloaded from the server.
    • SPAs add a router that modifies browser behavior to simulate page changes (but in reality, all changes are done on the client - no request to the server is made)�
  • Let’s review…

Lecture 11 Video

COMP 426: Modern Web Programming (Fall '26)

Intro to Next.js + Server Side Rendering

M3: Next.js

L12

4 of 72

MPA Example

COMP 426: Modern Web Programming (Fall '26)

Intro to Next.js + Server Side Rendering

M3: Next.js

L12

5 of 72

MPA Review

COMP 426: Modern Web Programming (Fall '26)

Intro to Next.js + Server Side Rendering

M3: Next.js

L12

Client

Browser Screen

DOM

index�html

main�css

main�css

main�css

main�js

React Functionality

These JS scripts get loaded, starting up React and all other packages / code running.

Now, we are looking at how an MPA loads initially.

Dev Server

index�html

main�css

main�css

main�css

main�js

index�html

about�html

Notice that MPAs have separate html files for each page!

6 of 72

MPA Review

COMP 426: Modern Web Programming (Fall '26)

Intro to Next.js + Server Side Rendering

M3: Next.js

L12

Client

Browser Screen

DOM

index�html

main�css

main�css

main�css

main�js

React Functionality

React renders, updating the DOM.

DOM change updates the browser view.

Hello, world!

Dev Server

index�html

main�css

main�css

main�css

main�js

index�html

about�html

7 of 72

MPA Review

COMP 426: Modern Web Programming (Fall '26)

Intro to Next.js + Server Side Rendering

M3: Next.js

L12

Client

Browser Screen

DOM

index�html

main�css

main�css

main�css

main�js

React Functionality

Hello, world!

At this point, it appears that the site has loaded successfully.

Dev Server

index�html

main�css

main�css

main�css

main�js

index�html

about�html

8 of 72

MPA Review

COMP 426: Modern Web Programming (Fall '26)

Intro to Next.js + Server Side Rendering

M3: Next.js

L12

Client

Dev Server

Browser Screen

DOM

index�html

main�css

main�css

main�css

main�js

index�html

index�html

main�css

main�css

main�css

main�js

React Functionality

Hello, world!

At this point, it appears that the site has loaded successfully.

Now, let’s see what happens when the user tries to navigate to the about page.

about�html

9 of 72

MPA Review

COMP 426: Modern Web Programming (Fall '26)

Intro to Next.js + Server Side Rendering

M3: Next.js

L12

Client

Dev Server

Browser Screen

DOM

index�html

main�css

main�css

main�css

main�js

index�html

about�html

index�html

React Functionality

Hello, world!

Client requests the website’s about page.

10 of 72

MPA Review

COMP 426: Modern Web Programming (Fall '26)

Intro to Next.js + Server Side Rendering

M3: Next.js

L12

Client

Dev Server

Browser Screen

DOM

index�html

main�css

main�css

main�css

main�js

index�html

about�html

index�html

React Functionality

Hello, world!

Client requests the website’s about page.

The server responds with about.html .

Existing React setup on the client and all files here get overwritten. DOM erased.

11 of 72

MPA Review

COMP 426: Modern Web Programming (Fall '26)

Intro to Next.js + Server Side Rendering

M3: Next.js

L12

Client

Dev Server

Browser Screen

DOM

index�html

main�css

main�css

main�css

main�js

index�html

about�html

about�html

12 of 72

MPA Review

COMP 426: Modern Web Programming (Fall '26)

Intro to Next.js + Server Side Rendering

M3: Next.js

L12

Client

Dev Server

Browser Screen

DOM

index�html

main�css

main�css

main�css

main�js

index�html

about�html

about�html

React Functionality

All CSS and JS gets loaded again. ��A new React instance spins up again (all local state gone)��The user sees a flash of an empty page before the page reloads again, which takes time.

13 of 72

MPA Review

COMP 426: Modern Web Programming (Fall '26)

Intro to Next.js + Server Side Rendering

M3: Next.js

L12

Client

Dev Server

Browser Screen

DOM

index�html

main�css

main�css

main�css

main�js

index�html

about�html

about�html

React Functionality

All CSS and JS gets loaded again. ��A new React instance spins up again (all local state gone)��The user sees a flash of an empty page before the page reloads again, which takes time.

About�page!

14 of 72

SPA Example

COMP 426: Modern Web Programming (Fall '26)

Intro to Next.js + Server Side Rendering

M3: Next.js

L12

15 of 72

SPA Example

COMP 426: Modern Web Programming (Fall '26)

Intro to Next.js + Server Side Rendering

M3: Next.js

L12

Client

Dev Server

Browser Screen

DOM

index�html

main�css

main�css

main�css

main�js

index�html

The client can request the website’s home page.

localhost:3000/

localhost:3000/

16 of 72

SPA Example

COMP 426: Modern Web Programming (Fall '26)

Intro to Next.js + Server Side Rendering

M3: Next.js

L12

Client

Dev Server

Browser Screen

DOM

index�html

main�css

main�css

main�css

main�js

index�html

The client can request the website’s home page.

The server responds with index.html .

localhost:3000/

17 of 72

SPA Example

COMP 426: Modern Web Programming (Fall '26)

Intro to Next.js + Server Side Rendering

M3: Next.js

L12

Client

Dev Server

Browser Screen

DOM

index�html

main�css

main�css

main�css

main�js

index�html

index�html

localhost:3000/

18 of 72

SPA Example

COMP 426: Modern Web Programming (Fall '26)

Intro to Next.js + Server Side Rendering

M3: Next.js

L12

Client

Dev Server

Browser Screen

DOM

index�html

main�css

main�css

main�css

main�js

index�html

index�html

The index.html file, usually mostly empty in a React app, populates the DOM with a root element.

DOM change updates the browser view.

localhost:3000/

19 of 72

SPA Example

COMP 426: Modern Web Programming (Fall '26)

Intro to Next.js + Server Side Rendering

M3: Next.js

L12

Client

Dev Server

Browser Screen

DOM

index�html

main�css

main�css

main�css

main�js

index�html

index�html

The index.html file now requests the CSS and JS files from its <head> metadata.

The index.html file, usually mostly empty in a React app, populates the DOM with a root element.

DOM change updates the browser view.

localhost:3000/

20 of 72

SPA Example

COMP 426: Modern Web Programming (Fall '26)

Intro to Next.js + Server Side Rendering

M3: Next.js

L12

Client

Dev Server

Browser Screen

DOM

index�html

main�css

main�css

main�css

main�js

index�html

index�html

The index.html file now requests the CSS and JS files from its <head> metadata.

The index.html file, usually mostly empty in a React app, populates the DOM with a root element.

DOM change updates the browser view.

The server responds with css/js .

localhost:3000/

21 of 72

SPA Example

COMP 426: Modern Web Programming (Fall '26)

Intro to Next.js + Server Side Rendering

M3: Next.js

L12

Client

Dev Server

Browser Screen

DOM

index�html

main�css

main�css

main�css

main�js

index�html

index�html

main�css

main�css

main�css

main�js

localhost:3000/

22 of 72

SPA Example

COMP 426: Modern Web Programming (Fall '26)

Intro to Next.js + Server Side Rendering

M3: Next.js

L12

Client

Dev Server

Browser Screen

DOM

index�html

main�css

main�css

main�css

main�js

index�html

index�html

main�css

main�css

main�css

main�js

React

These JS scripts get loaded, starting up React and all other packages / code running.

Router

localhost:3000/

But this time, there is a router.

23 of 72

SPA Example

COMP 426: Modern Web Programming (Fall '26)

Intro to Next.js + Server Side Rendering

React

Router

M3: Next.js

L12

Client

Dev Server

Browser Screen

DOM

index�html

main�css

main�css

main�css

main�js

index�html

index�html

main�css

main�css

main�css

main�js

React renders, updating the DOM.

DOM change updates the browser view.

Hello, world!

localhost:3000/

24 of 72

SPA Example

COMP 426: Modern Web Programming (Fall '26)

Intro to Next.js + Server Side Rendering

M3: Next.js

L12

Client

Dev Server

Browser Screen

DOM

index�html

main�css

main�css

main�css

main�js

index�html

index�html

main�css

main�css

main�css

main�js

Hello, world!

At this point, it appears that the site has loaded successfully.

React

Router

localhost:3000/

But, what if we try to navigate to the about page?

25 of 72

SPA Example

COMP 426: Modern Web Programming (Fall '26)

Intro to Next.js + Server Side Rendering

M3: Next.js

L12

Client

Dev Server

Browser Screen

DOM

index�html

main�css

main�css

main�css

main�js

index�html

index�html

main�css

main�css

main�css

main�js

Hello, world!

React

Router

localhost:3000/

User presses a link to navigate them to the about page

26 of 72

SPA Example

COMP 426: Modern Web Programming (Fall '26)

Intro to Next.js + Server Side Rendering

M3: Next.js

L12

Client

Dev Server

Browser Screen

DOM

index�html

main�css

main�css

main�css

main�js

index�html

index�html

main�css

main�css

main�css

main�js

Hello, world!

React

Router

localhost:3000/

The router instructs React to render the about page.

27 of 72

SPA Example

COMP 426: Modern Web Programming (Fall '26)

Intro to Next.js + Server Side Rendering

M3: Next.js

L12

Client

Dev Server

Browser Screen

DOM

index�html

main�css

main�css

main�css

main�js

index�html

index�html

main�css

main�css

main�css

main�js

React

Router

localhost:3000/

React clears the page…

28 of 72

SPA Example

COMP 426: Modern Web Programming (Fall '26)

Intro to Next.js + Server Side Rendering

M3: Next.js

L12

Client

Dev Server

Browser Screen

DOM

index�html

main�css

main�css

main�css

main�js

index�html

index�html

main�css

main�css

main�css

main�js

About page

React

Router

localhost:3000/

… and replaces it with the about page.

29 of 72

SPA Example

COMP 426: Modern Web Programming (Fall '26)

Intro to Next.js + Server Side Rendering

M3: Next.js

L12

Client

Dev Server

Browser Screen

DOM

index�html

main�css

main�css

main�css

main�js

index�html

index�html

main�css

main�css

main�css

main�js

About page

React

Router

localhost:3000/about

The router then updates the route to look like a new page loaded.

30 of 72

SPA Example

COMP 426: Modern Web Programming (Fall '26)

Intro to Next.js + Server Side Rendering

M3: Next.js

L12

Client

Dev Server

Browser Screen

DOM

index�html

main�css

main�css

main�css

main�js

index�html

index�html

main�css

main�css

main�css

main�js

About page

React

Router

localhost:3000/about

The router then updates the route to look like a new page loaded.

In this model, the client never asked the server for the new page.��The same React instance is running.��State is preserved.��The router handles page changes, and renders using the JS loaded initially because all components are part of the JS bundle.

31 of 72

  • When building applications, we can choose a framework to use to build our app with.�Frameworks often come with their own router and other tools out of the box that enable the development of large scale web apps.
  • When we add a client-side router, our app becomes a single-page application (SPA).
    • The app loads once on the client - then, routing actions just shuffles the active component shown on the screen. The app does not restart every time we try to load a new page!

App Architecture

COMP 426: Modern Web Programming (Fall '26)

Intro to Next.js + Server Side Rendering

  • Students in (or past) COMP 423: Angular is such a framework.� In that class, when working on an Angular project, you are building a SPA!

M3: Next.js

L12

32 of 72

  • SEO: Search engine optimization � → How well is an app designed to rank well on search engines?
  • For SEO: MPAs > SPAs. � But even here, amount of SEO-available information will be limited to what is ` available prior to any client-side rendering (i.e., React).

Tradeoffs Review

COMP 426: Modern Web Programming (Fall '26)

Intro to Next.js + Server Side Rendering

  • For UX: SPAs > MPAs.�For Interactivity: SPAs > MPAs.�For Speed: SPAs > MPAs.

M3: Next.js

L12

33 of 72

  • Next.js ( ): Framework used to build web applications.
    • Managed by Vercel ( ) and the community.
    • #1 React Framework and 14th largest GitHub repo (130k+ stars)
    • Next uses React components for UI.
    • Next uses Tailwind and TypeScript for better developer experience.
    • Next has its own router (one that is very intuitive)...�…but – Next’s architecture is a hybrid of both approaches (SPAs and MPAs)
      • Next.js aims to combine the best of both worlds.

Intro to Next.js

COMP 426: Modern Web Programming (Fall '26)

Intro to Next.js + Server Side Rendering

M3: Next.js

L12

34 of 72

  • When Next.js projects build and deploy, server code is generated as well.
    • Let’s take a look at how this works.

Intro to Next.js

COMP 426: Modern Web Programming (Fall '26)

Intro to Next.js + Server Side Rendering

M3: Next.js

L12

35 of 72

COMP 426: Modern Web Programming (Fall '26)

Intro to Next.js + Server Side Rendering

Building a Next Project

Client

Dev Server

Browser Screen

DOM

Step 1: We develop our Next project in VSCode. This includes HTML, TSX, etc.

M3: Next.js

L12

Our Next Project

</>

36 of 72

COMP 426: Modern Web Programming (Fall '26)

Intro to Next.js + Server Side Rendering

Building a Next Project

​

Client

Dev Server

Browser Screen

DOM

Our Next Project

Step 1: We develop our Next project in VSCode. This includes HTML, TSX, etc.

Step 2: We either deploy to Vercel or run locally, which causes our project to build.

</>

M3: Next.js

L12

37 of 72

COMP 426: Modern Web Programming (Fall '26)

Intro to Next.js + Server Side Rendering

Building a Next Project

​

Client

Dev Server

Browser Screen

DOM

Step 1: We develop our Next project in VSCode. This includes HTML, TSX, etc.

Step 2: We either deploy to Vercel or run locally, which causes our project to build.

</>

.next

This build step creates a folder called .next containing both our original bundle and server code.

M3: Next.js

L12

Our Next Project

38 of 72

COMP 426: Modern Web Programming (Fall '26)

Intro to Next.js + Server Side Rendering

Building a Next Project

​

Client

Dev Server

Browser Screen

DOM

Our Next Project

Step 1: We develop our Next project in VSCode. This includes HTML, TSX, etc.

Step 2: We either deploy to Vercel or run locally, which causes our project to build.

</>

.next

This build step creates a folder called .next containing both our original bundle and server code.

.next

...

M3: Next.js

L12

39 of 72

COMP 426: Modern Web Programming (Fall '26)

Intro to Next.js + Server Side Rendering

Building a Next Project

​

Client

Dev Server

Browser Screen

DOM

Our Next Project

Step 1: We develop our Next project in VSCode. This includes HTML, TSX, etc.

Step 2: We either deploy to Vercel or run locally, which causes our project to build.

</>

.next

This build step creates a folder called .next containing both our original bundle and server code.

.next

...

Next Server Functionality

Next.js server functionality starts running on the server.

M3: Next.js

L12

40 of 72

COMP 426: Modern Web Programming (Fall '26)

Intro to Next.js + Server Side Rendering

This leaves us with…

​

Client

Dev Server

Browser Screen

DOM

.next

...

Next Server Functionality

Now, what if the client requests the home page?

M3: Next.js

L12

41 of 72

COMP 426: Modern Web Programming (Fall '26)

Intro to Next.js + Server Side Rendering

This leaves us with…

​

Client

Dev Server

Browser Screen

DOM

.next

...

Next Server Functionality

M3: Next.js

L12

The client requests the website’s home page.

localhost:3000/

42 of 72

COMP 426: Modern Web Programming (Fall '26)

Intro to Next.js + Server Side Rendering

This leaves us with…

​

Client

Dev Server

Browser Screen

DOM

.next

...

Next Server Functionality

M3: Next.js

L12

The client requests the website’s home page.

localhost:3000/

(! IMPORTANT !)��Next.js tries to generate the HTML file for this page (using React) on the server first.

html

This HTML file should look like the page - it is not just a blank shell!

43 of 72

COMP 426: Modern Web Programming (Fall '26)

Intro to Next.js + Server Side Rendering

This leaves us with…

​

Client

Dev Server

Browser Screen

DOM

.next

...

Next Server Functionality

M3: Next.js

L12

The client requests the website’s home page.

localhost:3000/

(! IMPORTANT !)��Next.js tries to generate the HTML file for this page (using React) on the server first.

html

This HTML file should look like the page - it is not just a blank shell!

The client can request the website’s home page.

The server responds with this html .

44 of 72

COMP 426: Modern Web Programming (Fall '26)

Intro to Next.js + Server Side Rendering

This leaves us with…

​

Client

Dev Server

Browser Screen

DOM

.next

...

Next Server Functionality

M3: Next.js

L12

The client requests the website’s home page.

localhost:3000/

(! IMPORTANT !)��Next.js tries to generate the HTML file for this page (using React) on the server first.

html

This HTML file should look like the page - it is not just a blank shell!

The client can request the website’s home page.

The server responds with this html .

html

45 of 72

COMP 426: Modern Web Programming (Fall '26)

Intro to Next.js + Server Side Rendering

This leaves us with…

​

Client

Dev Server

Browser Screen

DOM

.next

...

Next Server Functionality

M3: Next.js

L12

localhost:3000/

html

This HTML file should look like the page - it is not just a blank shell!

html

46 of 72

COMP 426: Modern Web Programming (Fall '26)

Intro to Next.js + Server Side Rendering

This leaves us with…

​

Client

Dev Server

Browser Screen

DOM

.next

...

Next Server Functionality

M3: Next.js

L12

localhost:3000/

html

html

Home�Page!

Since this HTML file should look like the page - the DOM gets updated and immediately shows the right page.

With this approach, the initial HTML is generated on the server, not the client.��This is called Server-Side Rendering (SSR)

47 of 72

COMP 426: Modern Web Programming (Fall '26)

Intro to Next.js + Server Side Rendering

Client

Dev Server

Browser Screen

DOM

.next

...

Next Server Functionality

M3: Next.js

L12

localhost:3000/

html

html

Home�Page!

Attendance Check!

!

  • Debate with a neighbor:�Think about this diagram and serving html using SSR…
    • Is our page interactive?�
  • Write down your thoughts and reply on GradeScope!

48 of 72

COMP 426: Modern Web Programming (Fall '26)

Intro to Next.js + Server Side Rendering

Client

Dev Server

Browser Screen

DOM

.next

...

Next Server Functionality

M3: Next.js

L12

localhost:3000/

html

html

Home�Page!

Attendance Check!

!

Answer: No.

  • Remember - we need JS to make our page interactive / have functionality!
    • There is no JS here - only static HTML.
  • So, in this state, the page is “inert”:
    • Buttons won’t work, etc.
  • We still need that JS code / bundle from before for this page to become interactive…

49 of 72

COMP 426: Modern Web Programming (Fall '26)

Intro to Next.js + Server Side Rendering

Adding Interactivity

​

Client

Dev Server

Browser Screen

DOM

.next

...

Next Server Functionality

M3: Next.js

L12

html

Home�Page!

The index.html file now requests JS files from its <head> metadata.

50 of 72

COMP 426: Modern Web Programming (Fall '26)

Intro to Next.js + Server Side Rendering

Adding Interactivity

​

Client

Dev Server

Browser Screen

DOM

.next

...

Next Server Functionality

M3: Next.js

L12

html

Home�Page!

The index.html file now requests JS files from its <head> metadata.

The server responds with css/js .

51 of 72

COMP 426: Modern Web Programming (Fall '26)

Intro to Next.js + Server Side Rendering

Adding Interactivity

​

Client

Dev Server

Browser Screen

DOM

.next

...

Next Server Functionality

M3: Next.js

L12

html

Home�Page!

These JS scripts get loaded, starting up React / Next and all other packages / code running.

Router

React, etc

Next App

52 of 72

COMP 426: Modern Web Programming (Fall '26)

Intro to Next.js + Server Side Rendering

Adding Interactivity

​

Client

Dev Server

Browser Screen

DOM

.next

...

Next Server Functionality

M3: Next.js

L12

html

Home�Page!

Router

React, etc

Next App

Next then will reconcile the existing page and sprinkle in functionality / JS.

Page becomes interactive!

This process is known as hydration.

53 of 72

COMP 426: Modern Web Programming (Fall '26)

Intro to Next.js + Server Side Rendering

Adding Interactivity

​

Client

Dev Server

Browser Screen

DOM

.next

...

Next Server Functionality

M3: Next.js

L12

html

Home�Page!

Router

React, etc

Next App

From this point on, the Next app is running on the client.��So, from here on, we can treat the app like an SPA.�(Use the Router to switch pages!)

SSR primarily just affects the first load (when we enter the app). *

54 of 72

Standard SPA vs. Next (SSR) for SEO

COMP 426: Modern Web Programming (Fall '26)

Intro to Next.js + Server Side Rendering

M3: Next.js

L12

55 of 72

COMP 426: Modern Web Programming (Fall '26)

Intro to Next.js + Server Side Rendering

🤖

🤖

Traditional SPA

​

Next.js (SSR)

Search Engine Crawler

Dev Server

Browser Screen

DOM

.next

...

Next Server Functionality

M3: Next.js

L12

Search Engine Crawler

Browser Screen

DOM

Dev Server

index�html

main�css

main�css

main�css

main�js

index�html

56 of 72

COMP 426: Modern Web Programming (Fall '26)

Intro to Next.js + Server Side Rendering

In this example, assume the crawler is trying to�“index” (read) the about page.

🤖

🤖

Traditional SPA

​

Next.js (SSR)

Search Engine Crawler

Dev Server

Browser Screen

DOM

.next

...

Next Server Functionality

M3: Next.js

L12

Search Engine Crawler

Browser Screen

DOM

Dev Server

index�html

main�css

main�css

main�css

main�js

index�html

57 of 72

COMP 426: Modern Web Programming (Fall '26)

Intro to Next.js + Server Side Rendering

🤖

🤖

Traditional SPA

​

Next.js (SSR)

Search Engine Crawler

Dev Server

Browser Screen

DOM

.next

...

Next Server Functionality

M3: Next.js

L12

Search Engine Crawler

Browser Screen

DOM

Dev Server

index�html

main�css

main�css

main�css

main�js

index�html

Crawler requests the about page

/about

Crawler requests the about page

/about

58 of 72

COMP 426: Modern Web Programming (Fall '26)

Intro to Next.js + Server Side Rendering

🤖

🤖

Traditional SPA

​

Next.js (SSR)

Search Engine Crawler

Dev Server

Browser Screen

DOM

.next

...

Next Server Functionality

M3: Next.js

L12

Search Engine Crawler

Browser Screen

DOM

Dev Server

index�html

main�css

main�css

main�css

main�js

index�html

Crawler requests the about page

/about

Crawler requests the about page

/about

html

The server generates non-empty HTML.

The server immediately with index.html .

Mostly empty b/c it’s the client’s job to render the page in later!

59 of 72

COMP 426: Modern Web Programming (Fall '26)

Intro to Next.js + Server Side Rendering

🤖

🤖

Traditional SPA

​

Next.js (SSR)

Search Engine Crawler

Dev Server

Browser Screen

DOM

.next

...

Next Server Functionality

M3: Next.js

L12

Search Engine Crawler

Browser Screen

DOM

Dev Server

index�html

main�css

main�css

main�css

main�js

index�html

html

html

60 of 72

COMP 426: Modern Web Programming (Fall '26)

Intro to Next.js + Server Side Rendering

🤖

🤖

Traditional SPA

​

Next.js (SSR)

Search Engine Crawler

Dev Server

Browser Screen

DOM

.next

...

Next Server Functionality

M3: Next.js

L12

Search Engine Crawler

Browser Screen

DOM

Dev Server

index�html

main�css

main�css

main�css

main�js

index�html

html

html

The index.html file, usually empty in a React app, populates the DOM with a root element.

Page remains blank

About�Page!

Since this HTML file should look like the page - the DOM gets updated and immediately shows the right page.

61 of 72

COMP 426: Modern Web Programming (Fall '26)

Intro to Next.js + Server Side Rendering

🤖

🤖

Traditional SPA

​

Next.js (SSR)

Search Engine Crawler

Dev Server

Browser Screen

DOM

.next

...

Next Server Functionality

M3: Next.js

L12

Search Engine Crawler

Browser Screen

DOM

Dev Server

index�html

main�css

main�css

main�css

main�js

index�html

html

About�Page!

html

The html files now request JS files from its <head> metadata.

62 of 72

COMP 426: Modern Web Programming (Fall '26)

Intro to Next.js + Server Side Rendering

🤖

🤖

Traditional SPA

​

Next.js (SSR)

Search Engine Crawler

Dev Server

Browser Screen

DOM

.next

...

Next Server Functionality

M3: Next.js

L12

Search Engine Crawler

Browser Screen

DOM

Dev Server

index�html

main�css

main�css

main�css

main�js

index�html

html

About�Page!

html

The server responds with JS files.

63 of 72

COMP 426: Modern Web Programming (Fall '26)

Intro to Next.js + Server Side Rendering

🤖

🤖

Traditional SPA

​

Next.js (SSR)

Search Engine Crawler

Dev Server

Browser Screen

DOM

.next

...

Next Server Functionality

M3: Next.js

L12

Search Engine Crawler

Browser Screen

DOM

Dev Server

index�html

main�css

main�css

main�css

main�js

index�html

html

About�Page!

html

js

js

64 of 72

COMP 426: Modern Web Programming (Fall '26)

Intro to Next.js + Server Side Rendering

But, as we said last lecture, crawlers typically won’t run this JavaScript!

So, the loading ends and the crawler works with what it sees.

🤖

🤖

Traditional SPA

​

Next.js (SSR)

Search Engine Crawler

Dev Server

Browser Screen

DOM

.next

...

Next Server Functionality

M3: Next.js

L12

Search Engine Crawler

Browser Screen

DOM

Dev Server

index�html

main�css

main�css

main�css

main�js

index�html

html

About�Page!

html

js

js

65 of 72

COMP 426: Modern Web Programming (Fall '26)

Intro to Next.js + Server Side Rendering

The loading ends and the crawler works with what it sees.

Blank page with an SPA

�Pre-rendered page with Next.js

Yes, the page from Next is not interactive, but it usually contains enough content for the crawler to index this page well.

🤖

🤖

Traditional SPA

​

Next.js (SSR)

Search Engine Crawler

Dev Server

Browser Screen

DOM

.next

...

Next Server Functionality

M3: Next.js

L12

Search Engine Crawler

Browser Screen

DOM

Dev Server

index�html

main�css

main�css

main�css

main�js

index�html

html

About�Page!

html

js

js

66 of 72

  • With Next.js, you get the benefits of an SPA while maintaining great SEO.
    • Best part - Next.js does all of this automatically, behind the scenes!
    • As a developer, you will just write React-based pages and Next handles the rest.*
      • * Next has even more features for more seasoned devs that optimizes this process even more… but, we will leave this out for now.
  • Previous React Example (Client-side Rendering)
  • Example with Server-side Rendering (Next.js)

Big Idea

COMP 426: Modern Web Programming (Fall '26)

Intro to Next.js + Server Side Rendering

M3: Next.js

L12

67 of 72

Setting Up a Next.js App

COMP 426: Modern Web Programming (Fall '26)

Intro to Next.js + Server Side Rendering

  • There is a utility helper function called create-next-app.
  • Installation Instructions

M3: Next.js

L12

68 of 72

App Router

COMP 426: Modern Web Programming (Fall '26)

Intro to Next.js + Server Side Rendering

  • Next.js uses file-based routing.
    • This means that Next’s router will assign URLs to pages / API endpoints based on how they are positioned in the file structure!�
  • Paths within the /app directory are considered pages or endpoints.
    • To be assigned a route, a component must be in the page.tsx file

M3: Next.js

L12

69 of 72

Routing Files

  • Directory path in Next.js project under /app determines URL
  • Specific filenames recognized for specific functions
    • page.tsx
      • Exported default component rendered as page.
    • route.tsx
      • Makes path available as API endpoint
    • layout.tsx
      • Wraps any components rendered at this level or below
    • Others
      • loading, not-found, error, global-error, template, default

70 of 72

Layouts and Nested Routes

  • layout.tsx in a path wraps any page at that level or lower
  • Rendered page component provided as children in props
  • Useful for common UI elements
    • Header, footer, navbar, etc.

71 of 72

Client-side Components

  • By default, Next.js expects components to be rendered on server-side.
  • Any component that use client-side features must declare itself as client-side with 'use client' directive at top of file.
  • Use Client Components when you need:
    • State and event handlers. E.g. onClick, onChange.
    • Lifecycle logic. E.g. useEffect.
    • Browser-only APIs. E.g. localStorage, window, navigator.geolocation, etc.
    • Custom hooks.

​

72 of 72

Dynamic Routes

  • Paths with segments enclosed in [ ]
  • Matches any string for portion of the path
  • Segment name becomes parameter available to components
    • Server-side: passed as Promise in props
    • Client-side: accessed by useParams() hook