A javascript framework, NextJS, built on top of React.

1. A JS Framework for building SPA

2. Progressive Web App (PWA)?

3. https://developers.google.com/web/progressive-web-apps/checklist
PWA In Action
Progressive Loading

4. PWA Checklist

5. Single Page Application
CSR vs SSR

6. HTML
CSS
JS
Single Page Application

7. HTML
CSS
JS
Client Side Rendering (CSR)
• DNS Lookup
• TLS Handshaking
• First Byte
• Last Byte
• DNS Lookup
• TLS Handshaking
• First Byte
• Last Byte
• DNS Looku
• TLS Hands
• First Byte
• Last Byte
first paint start here
1 http request

8. HTML
CSS
JS
Server Side Rendering (SSR)
interaction is ready here
first paint start here

9. HTML
CSS
JS
Server Side Rendering (SSR)
interaction is ready here
first paint start here
CSS
inline style

10. HTML
CSS
JS
Code Splitting
first paint start here
CSS
inline style
JS
JS
bundle.js
home.js
category.js

11. Inline Critical CSS
Code Splitting
Prefetching
Server Side Rendering
PWA needs

12. Next.JS comes with
Server-side rendering
Automatic code splitting
Prefetch support
Inline critical CSS
Built in routing
Production ready

13. Next.JS comes with
Server-side rendering
Automatic code splitting
Prefetch support
Inline critical CSS
Built in routing
Production ready
Optimized for SEO

14. DEMO
https://pwa-immleiwbla.now.sh
https://pwa-immleiwbla.now.sh/category
https://pwa-immleiwbla.now.sh/pdp

15. npm install --save next react react-dom
"scripts": {
"dev": "next",
"build": "next build",
"export": "next export",
"start": "next start",
},
NextJS Setup

16. Server-side rendering
Automatic code splitting
Prefetch support
Inline critical CSS
Built in routing
Production ready
Batteries Included

17. PWA Checklist

18. https://github.com/zeit/next.js/issues/1458
Who is using NextJS

19. Try it
https://github.com/pramendra/next-pwa-demo