NextJS - Online Summit for Frontend Developers September 2020
2 likes458 views
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.
NextJS - Online Summit for Frontend Developers September 2020
- 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 [email protected]. T h e E n d @iammilaad