The document elaborates on server-side rendering (SSR) and client-side rendering (CSR) in Next.js, highlighting different aspects like routing, data fetching, error handling, and authentication. It also discusses configuration tips for deployment and optimizing builds, emphasizing the benefits of using Next.js for React applications. The author, Milad Heydari, shares insights and practical advice for developers to enhance their workflow with Next.js.

1. SSR in NextJSModern Server-Side
Rendering elaboration
in NextJS
Challenges, performance, Tips & Tricks,
Deployment

2. Who I AmMilad Heydari
Full-Time Developer, Part-Time Speaker & Teacher.IRAN Reactconf,
Hastnama Creative Salutations, Finaux Cloud Limited
@iammilaad

3. TopicsToday’s Topics
D i f f e r e n t B e t w e e n C S R & S S R
- Let’s know Server-Side Rendering and Client-Side Rendering
@IAMMILAAD
A D e e p D i v e i n t o N e x t J S
R o u t i n g
- ways of routing in nextJS, Dynamic Routing, Nested Routing, Routing between pages and then tipis
and tricks
S t y l i n g
- ways of styling in nextJS. CSS. LESS. SCSS. CSS in JS, Styled Components.

4. TopicsToday’s Topics
F e t c h i n g D a t a & e r r o r h a n d l i n g s
- get data from APIs, getInitialProps and getServerSideProps, how to handle server errors in APIs
@IAMMILAAD
A D e e p D i v e i n t o N e x t J S
S i m p l e A u t h e n t i c a t i o n
- Authentication with cookies and use interceptors
C o n f i g a n d D e p l o y m e n t
- tips & tricks/ nextjs.config.js & .babelrc file config and development on server

5. SRR and CSRSSR and CSR
Server-Side Rendering / Client-Side Rendering

6. CSRClient Side Rendering
a p p l i c a t i o n s f u l l y g e n e r a t e d b y J a v a s c r i p t i n
t h e b r o w s e r s
@IAMMILAAD
w e n e e d t o k n o w a b o u t
o u r J S b u n d l e w i l l f e t c h a f t e r o n e o r t w o
s e c o n d s
a f t e r J S l o a d e d , v i r t u a l D O M m o v e d t o t h e
b r o w s e r D O M f o r t h e p a g e t o b e v i e w a b l e

7. Client
Rendered
Application
Client
Rendered
Application
A typical response sent by the server when requesting a
React site will look something like this:
index.html contains all the CSS and JS

8. CSR issuesCSR issues
J S c o d e s c a n n o t r u n o n o l d d e v i c e s o r
b r o w s e r s
@IAMMILAAD
t w o m a j o r i s s u e s i n C S R
s e a r c h e n g i n e s a n d s o c i a l n e t w o r k s c a n n o t
c r a w l y o u r w e b s i t e

9. Server
Rendered
Application
Server
Rendered
Application
rendering a client-side single page application (SPA) on the
server and then sending a fully rendered page to the client.
NextJS is a simple powerful framework to make react
universal applications.

10. NextJSNextJS
Next.js gives you the best developer experience with all the features you need for production:
hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more.
No config needed.

11. RoutingRouting
1 . f i l e - s y s t e m b a s e d r o u t i n g
@IAMMILAAD
N e x t J S R o u t e r
2 . c u s t o m r o u t i n g

12. File-system
Based
Routing
File-system
Based
Routing
and also supports nested routing with file-system based.
When a file is added to the pages directory it's
automatically available as a route.

13. Custom
Server
Routing
Custom
Server
Routing
in this way, you should disable file-system routing
IT’S CALLED “Custom Server”

14. Dynamic
Routing
Dynamic
Routing
• ebay.com/profile/dasboard
• ebay.com/profile/messages/conversation/PUdkuy2Sdo5EXqO
• ebay.com/profile/messages/conversation/PUdkuy2Sdo5EXqO/55
handle dynamic urls like ebay.com/products/
nike-react

15. Dynamic
Routing
Working with
Dynamic Routing
inside getInitialProps or
getServerSideProps
h o w t o g e t a n d m a n i p u l a t e d y n a m i c s t r i n g f r o m u r l
@iammilaad
inside component and using
withRouter

16. Routing
Between
Dynamic
Pages
Routing
Between
Dynamic
Pages
• href -> physical component address in pages
• as -> the url that will be shown in the browser
navigate to another page without loosing app
state

17. TipsRouting Tips
1 . m a k e y o u r o t h e r c o m p o n e n t s o u t s i d e o f
p a g e s f o l d e r
@IAMMILAAD
t i p s a n d t r i c k s i n r o u t i n g
2 . d i v i d e y o u r c o m p o n e n t s f o l d e r i n t h r e e
d i f f e r e n t t y p e s
•index.js
•style.js
•constants.js

18. StylingStyling
CSS / LESS / SASS / CSS IN JS / STYLED COMPONENTS

19. Fetching DataFetching Data
get data from APIs and using pre-rendered mode.

20. Fetch in
Server
pass to
Client
Fetch in
Server
pass to
Client
then we can access regionData, categoryData and query as a props in our
component and we can pass props to our children components.
for using pre-rendered mode you ned to call
getServerSideProps or getInitialProps

21. Fetch in Server
Pass to Client
Fetch in Server
Pass to Client

22. Errors Between
Client nd Server
Errors Between
Client and Server
i n t h i s e x a m p l e , i u s e d a p i s a u c e l i b r a r y t o
f e t c h d a t a a n d u s i n g a d d R e s p o n s eT r a n s f o r m
f u n c t i o n , I n o r d e r t o h a n d l e s u c c e s s o r f a i l u r e
A P I s w h e n r e s p o n s e s t a t u s

23. Error ComponentError Component
p a s s e s s t a t u s A P I c o d e s a s a p r o p s t o p a r e n t
c o m p o n e n t s s h o w c o n d i t i o n a l l y c o m p o n e n t s .
in app.js
M a k e s u r e t o k e e p t h a t i n m i n d , w e s h o u l d
c a l l g e t S e r v e r S i d e P r o p s o r g e t I n i t i a l P r o p s
f u n c t i o n s i n s i d e r o o t c o m p o n e n t .

24. AuthenticationAuthentication
s i m p l e A u t h e n t i c a t i o n i n N e x t J S a n d o n e a c h
r e q u e s t , t h e u s e r ’ s t o k e n w o u l d b e s e n t w i t h
t h e m i f i t e x i s t s i n t h e u s e r ’ s c o o k i e .

25. difference between
getInitialProps &
getServerSideProps
difference between
getInitialProps &
getServerSideProps
g e t I n i t i a l P r o p s
- run in server and browser and you may have to write codes specifically for the browser and server.
g e t S e r v e r S i d e P r o p s
- getServerProps just work on the server and do not run in the browser.

26. ImportantImportant Tip
getInitialProps and getServerSideProps just work in root
components like page/event.js and you should pass results
as a props to children components.
@IAMMILAAD

27. Deployment
and
Production
Ready
Deployment
and
Production
Ready
- Analyze the bundle pack
- Uglify and Minify JS Bundles
- minify CSS Bundles
- Remove Source Maps and comments
- set environment variables
- manage and keep your application online on the server
t i p s f o r o p t i m i z e b u i l d
a n d d e p l o y m e n t

28. BundleAnalyzerBundleAnalyzer package
@iammilaad
T r e e m a p s i z e s

29. Uglify
Minify
SourceMaps
Uglify
Minify
SourceMaps
Creating an optimized production build.

30. .ENV.ENV
- next-runtime-dotenv package
- dotenv pacakge
@IAMMILAAD

31. @IAMMILAAD
DeploymentDeployment
ecosystem.conf ig.js
P M 2 P a c k a g e

32. Thank
You.
Milad
Heydari
Thank
You.
Milad
Heydari
you can reach me anytime at
miladheydari.work@gmail.com.
T h e E n d
@iammilaad