NextJS, A JavaScript Framework for building next generation SPA
0 likes2,620 views
This document summarizes Next.js, a JavaScript framework for building single-page applications. It discusses key Next.js features like server-side rendering, automatic code splitting, prefetching and inline critical CSS. It provides demo links and instructions for setting up a basic Next.js project using npm. Overall, Next.js is presented as a batteries-included solution for building production-ready PWAs with features like routing and optimization out of the box.
NextJS, A JavaScript Framework for building next generation SPA
- 1. A JS Framework for building SPA
- 2. Progressive Web App (PWA)?
- 5. Single Page Application CSR vs SSR
- 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
- 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