Frontend Tooling / Framework

[bestickley]

Currently, Green Boost templates created from gboost CLI use Vite for frontend build tooling. Vite offers an excellent DX, it's fast, pluggable, and widely supported by the community. It's used by many JS frameworks for tooling and even Angular is starting to build their tooling on top of Vite so many devs have a vested interested in Vite's success which is good. However, Vite + React is best for building SPAs, not SSG (content sites) or SSR (e-commerce) sites. There isn't widely agreed upon solution for SSG vs SSR. I want GB's frontend tooling / framework to be flexible to support those types of web sites/apps. The de-facto solution for those types of apps built with React is Next.js. Next.js coins themselves as the "The React Framework for the Web". They have a large community and Next.js 13 is starting to take advantage of the new React Server Components. Next.js also provides a built in routing solution which is compelling. Currently GB uses React Router which has worked well, but your framework can optimize your website more if it's integrated into the router. Next.js 13.4 also just stabilized the "app directory feature" which adds many new features.

Next.js tooling doesn't currently provide as great of a DX as Vite's but this will likely change as turbopack stabilizes.

Next.js SSR sites are built to be deployed on Vercel's platform and isn't super simple to openly deploy to AWS. OpenNext.js is changing this with an easy way to deploy with the CDK to AWS with CloudFront.

Best Reasons to use Next.js:

• Meta's recommended way to build apps with React
• With Next.js 13's app directory, you still get client side navigation where routes are prefetched for SPA-like experience giving you best of both worlds (SSR and CSR)
• More Performant: less JS sent over network
• More Flexible: enabling web server functionality (compared to static CDN) unlocks new web development patterns especially around Auth (i.e. HTTP only cookies for increased security)
• Allows use of React Server Components which future React development is focused on
• Customers are expecting faster web apps which server rendering is needed for
• Popularity
• Community/Support

Best Reasons to stick with Vite:

• Simpler (Less Infrastructure)
• Just use code splitting (React.lazy with React Router data routers) to improve performance/web vitals

Relevant Links:

• https://gist.github.com/gaearon/9d6b8eddc7f5e647a054d7b333434ef6
• https://nextjs.org/docs/getting-started/react-essentials
• https://addyosmani.com/blog/react-server-components-app-router/
• https://frontendmastery.com/posts/rethinking-react-best-practices/
• https://www.code-insights.dev/posts/nextjs-spa-or-mpa
• https://www.epicweb.dev/the-webs-next-transition

[firxworx]

Added $0.02 to the discussion in the issue (#221):
#221 (comment)