<\/p>\n
<\/p>\n
In the React ecosystem, Next.js stands as the representative SSR framework, beloved by developers for its out-of-the-box experience and powerful features. But for those who want complete control over the build process<\/strong>, deep customization of deployment strategies<\/strong>, or simply understanding SSR fundamentals<\/strong>, Next.js’s “black box” nature becomes a limitation.<\/p>\n <\/p>\n I spent several months building a lightweight yet fully-featured React SSR framework from scratch \u2014 NSBP (Node React SSR by Webpack)<\/strong>. Here’s the development journey, technical choices, core features, and practical experience gained.<\/p>\n <\/p>\n Live Demo<\/strong>: https:\/\/nsbp.erishen.cn\/<\/a> | GitHub<\/strong>: https:\/\/github.com\/erishen\/nsbp<\/a><\/p>\n <\/p>\n <\/p>\n <\/p>\n Next.js’s power comes from automation, but that means losing some control:<\/p>\n <\/p>\n <\/p>\n <\/p>\n Next.js’s Vercel deployment is convenient, but if you want to deploy on your own Linux server, use Docker Compose, configure reverse proxies and load balancing, or implement custom security policies \u2014 controlling your own Express server is advantageous.<\/p>\n <\/p>\n <\/p>\n Writing SSR rendering logic by hand gives you deep understanding:<\/p>\n <\/p>\n <\/p>\n <\/p>\n <\/p>\n <\/p>\n <\/p>\n <\/p>\n <\/p>\n <\/p>\n <\/p>\n <\/p>\n <\/p>\n Server-side data prefetch to avoid client-side re-requests:<\/p>\n <\/p>\n <\/p>\n Performance comparison<\/strong>: Traditional CSR ~2-3 seconds; NSBP SSR ~0.5-1 second.<\/p>\n <\/p>\n <\/p>\n <\/p>\n Initial load: ~200KB main bundle, only home page code. Other pages loaded on demand.<\/p>\n <\/p>\n <\/p>\n – Helmet security headers<\/strong>: CSP, X-Frame-Options, X-Content-Type-Options, HSTS<\/p>\n – Rate limiting<\/strong>: 100 requests per 15 minutes on API routes<\/p>\n <\/p>\n <\/p>\n <\/p>\n <\/p>\n – Quality toolchain<\/strong>: ESLint + Prettier + Husky pre-commit hooks with lint-staged<\/p>\n – CLI tool<\/strong>: – Make commands<\/strong>: <\/p>\n <\/p>\n – Tree shaking<\/strong>: – Code minification<\/strong>: TerserPlugin with multi-process compression, – Static caching<\/strong>: 1-year immutable cache for JS\/CSS\/images<\/p>\n – Image dimension probing<\/strong>: probe-image-size during SSR to avoid client re-requests<\/p>\n <\/p>\n <\/p>\n Good for<\/strong>: personal projects, rapid prototypes, education\/learning, highly customized projects, low-resource environments<\/p>\n <\/p>\n Not ideal for<\/strong>: large enterprise apps, rapid iteration projects, AI\/ML features<\/p>\n <\/p>\n <\/p>\n – React 19 Hydration Error #418<\/strong>: Replaced – Docker port config<\/strong>: Moved docker-compose.yml to root directory for .env access<\/p>\n – Webpack Dev Server hot reload<\/strong>: Correctly configured Browser Sync Webpack Plugin<\/p>\n <\/p>\n <\/p>\n React Server Components, tRPC integration, Vitest migration, Service Worker caching, CDN support, ISR implementation<\/p>\n <\/p>\n <\/p>\n Building NSBP was an invaluable learning experience. While it may not replace Next.js, I deeply understood every link in modern frontend engineering, mastered building complete applications from scratch, and developed problem-solving patterns for complex systems.<\/p>\n <\/p>\n Framework choice has no absolute right or wrong \u2014 only suitability. Next.js suits rapid development and most scenarios, but if you want complete control, deep learning, or special requirements, building from scratch is also a valid choice.<\/p>\n <\/p>\n Links<\/strong>: Live Demo<\/a> | GitHub<\/a> | CLI: Introduction In the React ecosystem, Next.js stands as […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"english_url":"","chinese_url":"https:\/\/erishen.cn\/?p=222","footnotes":""},"class_list":["post-238","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/erishen.cn\/index.php?rest_route=\/wp\/v2\/pages\/238","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/erishen.cn\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/erishen.cn\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/erishen.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/erishen.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=238"}],"version-history":[{"count":3,"href":"https:\/\/erishen.cn\/index.php?rest_route=\/wp\/v2\/pages\/238\/revisions"}],"predecessor-version":[{"id":254,"href":"https:\/\/erishen.cn\/index.php?rest_route=\/wp\/v2\/pages\/238\/revisions\/254"}],"wp:attachment":[{"href":"https:\/\/erishen.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=238"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Why Build Instead of Using Next.js?<\/h2>\n
Complete Control Over the Build Process<\/h3>\n
\n\/\/ Next.js build (black box)\nnext build\n\/\/ \u2192 auto routing, auto code splitting, auto image optimization, hundreds of hidden steps\n\n\/\/ NSBP \u2014 precise control over every step\n\/\/ config\/webpack.base.js\nmodule.exports = {\n entry: {\n client: '.\/src\/client\/index.tsx',\n server: '.\/src\/server\/index.ts'\n },\n plugins: [\n new MiniCssExtractPlugin(),\n new TerserPlugin(),\n \/\/ add any Webpack plugin\n ]\n}\n<\/code><\/pre>\nDeep Customization of Deployment<\/h3>\n
Learning SSR Fundamentals<\/h3>\n
\nconst sheet = new ServerStyleSheet()\nconst jsx = sheet.collectStyles(\n <Provider store={store}>\n <StaticRouter location={reqPath}>\n <Routes>{\/* ... *\/}<\/Routes>\n <\/StaticRouter>\n <\/Provider>\n)\nconst content = renderToString(jsx)\nconst styleTags = sheet.getStyleTags()\n<\/code><\/pre>\nTechnical Stack & Architecture<\/h2>\n
\n\n
\n \nCategory<\/td>\n Choice<\/td>\n Version<\/td>\n Reason<\/td>\n<\/tr>\n<\/thead>\n \n React<\/td>\n React 19<\/td>\n 19.2.3<\/td>\n Latest, concurrent features, better type support<\/td>\n<\/tr>\n \n State<\/td>\n Redux Toolkit<\/td>\n \u2014<\/td>\n Simplified Redux, built-in Thunk support<\/td>\n<\/tr>\n \n Router<\/td>\n React Router DOM<\/td>\n 7.12.0<\/td>\n Stable client-side routing<\/td>\n<\/tr>\n \n Code Split<\/td>\n @loadable\/component<\/td>\n 5.15.0<\/td>\n Mature code splitting<\/td>\n<\/tr>\n \n Build<\/td>\n Webpack 5<\/td>\n 5.96.0<\/td>\n Modular, extensible, rich ecosystem<\/td>\n<\/tr>\n \n Server<\/td>\n Express<\/td>\n 5.2.1<\/td>\n Lightweight, rich middleware ecosystem<\/td>\n<\/tr>\n \n Styling<\/td>\n Styled-components + Sass\/Less<\/td>\n \u2014<\/td>\n Multiple choices, flexible switching<\/td>\n<\/tr>\n \n Language<\/td>\n TypeScript<\/td>\n 5.x<\/td>\n Type safety, excellent DX<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n SSR Rendering Architecture<\/h3>\n
\nHTTP Request\n \u2193\nExpress Middleware (Helmet, Rate Limit)\n \u2193\nSSR Render Layer:\n 1. Create Redux Store\n 2. Prefetch route data (loadData)\n 3. renderToString \u2192 HTML\n 4. Extract Styled-components styles\n 5. Serialize state to window.context\n \u2193\nReturn HTML + Initial State\n<\/code><\/pre>\nClient Hydration<\/h3>\n
\nconst App = () => {\n const store = useMemo(() => {\n if (isSEO() && window?.context?.state) {\n return getStore(window.context.state)\n }\n return getStore()\n }, [])\n\n return (\n <Provider store={store}>\n <BrowserRouter>\n <Routes>{\/* ... *\/}<\/Routes>\n <\/BrowserRouter>\n <\/Provider>\n )\n}\n\nloadableReady(() => {\n hydrateRoot(document.getElementById('root')!, <App \/>)\n})\n<\/code><\/pre>\nCore Features<\/h2>\n
Three Rendering Modes<\/h3>\n
\n\n
\n \nMode<\/td>\n URL<\/td>\n Use Case<\/td>\n<\/tr>\n<\/thead>\n \n SSR (default)<\/td>\n \/<\/code> or \/?nsbp=1<\/code><\/td>\nSEO, fast initial load<\/td>\n<\/tr>\n \n CSR<\/td>\n \/?nsbp=0<\/code><\/td>\nDebugging, dev experience<\/td>\n<\/tr>\n \n SSR Fallback<\/td>\n \/?nsbp=1&from=link<\/code><\/td>\nInternal links, allow client update<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n Smart SSR Data Prefetching<\/h3>\n
\n\/\/ src\/Routers.tsx\nexport default [{\n path: '\/',\n element: <Home \/>,\n loadData: homeLoadData, \/\/ \u2190 prefetch on SSR\n key: 'home'\n}]\n<\/code><\/pre>\nCode Splitting & Lazy Loading<\/h3>\n
\nimport loadable from '@loadable\/component'\nconst Home = loadable(() => import('@containers\/Home'), { fallback: <Loading \/> })\n<\/code><\/pre>\nMulti-Layer Security<\/h3>\n
Docker One-Click Deployment<\/h3>\n
\n# docker-compose.yml\nservices:\n app:\n build:\n context: .\n dockerfile: docker\/Dockerfile\n ports: [\"8081:3001\"]\n environment: [NODE_ENV=production, ENABLE_RATE_LIMIT=1]\n restart: unless-stopped\n healthcheck:\n test: [\"CMD\", \"node\", \"-e\", \"require('http').get(...)\"]\n<\/code><\/pre>\nDeveloper Experience<\/h2>\n
npx nsbp-cli create my-app<\/code> for project scaffolding<\/p>\nmake dev<\/code>, make prod<\/code>, make logs<\/code>, make shell<\/code><\/p>\nPerformance Optimizations<\/h2>\n
usedExports: true<\/code>, sideEffects: false<\/code><\/p>\ndrop_console<\/code> in production<\/p>\nWhen to Use (and Not Use) NSBP<\/h2>\n
Problems Solved<\/h2>\n
dangerouslySetInnerHTML<\/code> scripts with useEffect<\/code><\/p>\nFuture Plans<\/h2>\n
Conclusion<\/h2>\n
npx nsbp-cli create my-app<\/code><\/p>\n","protected":false},"excerpt":{"rendered":"