Top 23 JavaScript SSR Projects
-
Project mention: How do you guys keep both Google bots and their users happy? | reddit.com/r/webdev | 2021-12-05
If you're using Vue, switch to NuxtJS. It's a Server Side Rendering (SSR) framework for Vue.
-
Project mention: How To Develop A Progressive Web Application On An Android Device | dev.to | 2021-12-02
This project demonstrates how to develop a Progressive Web Application (PWA) locally on an Android device, using the Quasar Framework v2.
-
Scout APM
Scout APM: A developer's best friend. Try free for 14-days. Scout APM uses tracing logic that ties bottlenecks to source code so you know the exact line of code causing performance issues and can get back to building a great product faster.
-
react-loadable
:hourglass_flowing_sand: A higher order component for loading components with promises.
react-loadable - A higher order component for loading components with promises
-
Formats: Yeah you'd be better of keeping formating and what not handled by your chosen internationalisation library but when I first started its just one of the things i elected to put into the redux store. Benifits to keeping it in the store include allowing me to handle all date input fields format changes in one place instead of managing it in every component.
-
It's very important that you are choosing an active project instead of a dead/unmaintained project. An active project improves over time through community feedback. An unmaintained project does not move forward, fix functional bugs or patch security issues. Sometimes, a very popular package can be abandoned and go into a "frozen" state with many open issues and pull requests. It might have been a great solution in the past, but this is a sign that we have to move on. An example is react-loadable. It was a great solution for a very long time for code-splitting in React. I totally loved it. But it's stale now with many issues and PRs since 2018 (this post is written at the end of 2021). Now, if I need to split code in React, I use loadable-components, which is in active development, becoming more popular, patches bugs reported by the community, and most importantly, solves my problems. My personal advice: choose a package that's active in the last 3-6 months, with issues that are being resolved and PRs that are being merged.
-
react-snap - Zero-configuration framework-agnostic static prerendering for SPAs
-
react-firebase-starter
Boilerplate (seed) project for creating web apps with React.js, GraphQL.js and Relay
GitHub
-
-
-
Project mention: Zero runtime CSS-in-JS : Is this where great DX meets top-notch Web Performance? (sharing our experience) | reddit.com/r/reactjs | 2021-11-19
Consider adding Goober too to the mix.
-
-
react-async-component
Resolve components asynchronously, with support for code splitting and advanced server side rendering use cases.
Project mention: Show HN: Django and React SaaS boilerplate tutorial | news.ycombinator.com | 2020-12-23I've spent many years working on django including production setups for 3 different companies. My strong advice is to only use Django for API calls (DRF) and the built in admin UI. Do not use Django for ANY client facing static site rendering.
1. Deploy the React static pages and JS/CSS resources completely separately from Django. Cloudfront/S3 is my personal choice. You will need to tweak the CORS_ORIGIN_WHITELIST and CORS_ALLOW_HEADERS in the django settings but that's relatively easy.
2. Use Gatsy or something similar to help you with static site generation using react. Remember: React is in charge of HTML/JS/CSS of any type and Django should not get involved.
3. Use https://github.com/ctrlplusb/react-async-component or something similar to help break up your SPA so the browser doesn't have to load all of it at once and only loads smaller components on an as needed basis.
Don't mess with webpack and eject unless you have a very specialized need that cannot be addressed with everything out there.
-
there is https://github.com/flareact/flareact in development by a shopify engineer, worth checking out... seems like a good architecture for deeper integration with workers runtime
-
babel-plugin-styled-components
Improve the debugging experience and add server-side rendering support to styled-components
Unfortunately, one thing keeps me from fully migrating to SWC: it replaces Babel, but it seems to have no alternative for babel-plugin-styled-components, which is crucial for my work (I use server-side rendering for styles and want to have readable names for debugging).
-
Hey to everyone reading this! In this article, I’d like to investigate the different options of creating sitemaps in Nuxt using the sitemap module.
-
Project mention: What do you guys prefer to use with Laravel. React, Vue or Blade ; | reddit.com/r/laravel | 2021-10-13
Vue isn't incompatible with caching, but it admittedly does need a fancier cache that runs workers: https://github.com/frandiox/vitedge is one example of such an edge-optimized thing.
-
react-uploady - Modern file-upload components & hooks for React.
-
Project mention: Meteor with Webpack in 2018 — Faster compilation and better source handling | dev.to | 2021-07-29
Also, you can use HMR for server side. Meteor-Webpack supports webpack-hot-server-middleware , that replaces changed modules on your server without restarting all Meteor server. This also provides a lot of benefits on development.
-
react-relay-network-modern
Relay Modern Network Layer with middlewares — cache, auth, retry, batch, logger, SSR
Relay: Since relay uses a custom fetchGraphQL function, you have access to all the header information. But I suspect what you're really looking for is something like the authMiddleware in react-relay-network-modern which does an accessToken refresh and query refetch when the token is expired.
-
fastify-vite
Fastify plugin to serve Vite SSR applications with universal API, data fetching and hydration utilities.
Project mention: fastify-vite: Fastify plugin for Vite integration | reddit.com/r/javascript | 2021-11-11 -
rockpack
Rockpack is a simple solution for creating React Application with Server Side Rendering, bundling, linting, testing within 5 minutes
Project mention: Project Structure. Repository and folders. Review of approaches. | dev.to | 2021-02-17The folder structure reflected the approach of separating features from views, much like the example.
-
Project mention: "TypeError: append_styles is not a function" ... because of svelte-navigator? | reddit.com/r/sveltejs | 2021-09-30
-
Probably due to this issue.
-
I've used https://github.com/beyonk-adventures/sapper-rbac for a project and it worked great! I've used it with JWT tokens too so you should be able to set it up.
JavaScript SSR related posts
- React Libraries
- How do you guys keep both Google bots and their users happy?
- How to choose a third party package
- What are some issues with using React/Redux?
- The Birth of PoemKit: React Toolkit for Building a Marvelous Website From Scratch
- fastify-vite: Fastify plugin for Vite integration
- What do you guys prefer to use with Laravel. React, Vue or Blade ;
Index
What are some of the best open-source SSR projects in JavaScript? This list will help you:
| Project | Stars | |
|---|---|---|
| 1 | Nuxt.js | 38,838 |
| 2 | Quasar Framework | 19,993 |
| 3 | react-loadable | 16,225 |
| 4 | react-i18next | 6,908 |
| 5 | loadable-components | 6,163 |
| 6 | react-snap | 4,549 |
| 7 | react-firebase-starter | 4,366 |
| 8 | react-server | 3,932 |
| 9 | goober | 2,288 |
| 10 | hookrouter | 1,463 |
| 11 | react-async-component | 1,442 |
| 12 | flareact | 1,316 |
| 13 | babel-plugin-styled-components | 962 |
| 14 | sitemap-module | 605 |
| 15 | vitedge | 486 |
| 16 | react-uploady | 469 |
| 17 | webpack-hot-server-middleware | 324 |
| 18 | react-relay-network-modern | 288 |
| 19 | fastify-vite | 268 |
| 20 | rockpack | 264 |
| 21 | svelte-navigator | 242 |
| 22 | isomorphic-dompurify | 101 |
| 23 | sapper-rbac | 89 |
Are you hiring? Post a new remote job listing for free.
