DEV Community

Cover image for Why is No One Talking About Razzle?
José Muñoz
José Muñoz

Posted on


Why is No One Talking About Razzle?

I love working in React, as most people do, I started with Create-React-App (CRA).
This provided a big cushion for me to just start working and forget about setting up the environment, I think most of us would agree that if we could just open an editor and start spitting out JSX without setting up babel/webpack, it would make our lives simpler. One of the things I enjoy the most about React is using client-side routing with react-router-dom. When looking for SSR solutions, I noticed the market forced me to abandon my way of doing routing, which meant I couldn't benefit from all the APIs that I get for free with my router. This was a big turn off for me, I had to think about my existing projects, which had gained a certain level of complexity, and re-structure everything to fit in either Next's way of doing routing, or Gatsby's way of using templates for static content.

I am NOT a fan of tools that force you to think around them and don't enable your creativity, that's one of the main reasons I abandoned Angular after v2 came out.
So SSR for me was a deal breaker for some time, I needed the SEO benefits, but I wasn't going to re-factor my whole app to do so.

I needed more flexibility from my tools. So I started doing my research and I found Razzle which is an isomorphic SSR solution. Razzle even has its own CLI, Create-Razzle-App (also CRA?), which meant I could get going by just calling it like the original Create-React-App. Razzle grew on me really fast, it's config-less mode meant I could start prototyping quickly just like I would with CRA, but I had all the extensibility I needed without having to adapt my workflow to it.

If I wanted to change the ESLint config, I could do so by just adding a .eslintrc file to the project, the babel config could be changed the same way, add a plugin with a .babelrc and Razzle will pick it up and add it to the default config, if I needed to modify the webpack config just add a razzle.config.js file, which provides a no-hassle, extensible, default webpack config. I didn't have to buy into a new framework, I didn't have to refactor my whole app (much). I could keep using React-router-dom just like I did with CRA, so the learning curve is basically non-existent. In fact, the only thing I had to do in order to add SEO to my apps now was to copy paste the SEO component from Gatsby, that was it.

But wait! There's more.

Because of the way Razzle works, you can use it with Vue, Angular, or React.
By default, Razzle comes with React's config, but you could easily change the config to use any other frontend framework.

So How does Razzle work?

Razzle bundles both your client and server code using two different webpack instances running with Hot Module Replacement in parallel. While your server is bundled and run on whatever port you specify in src/index.js (3000 is the default), the client bundle (i.e. entry point at src/client.js) is served via webpack-dev-server on a different port (3001 by default) with its publicPath explicitly set to localhost:3001 (and not / like many other setups do).

Razzle was created by Jared Palmer, the mind behind Formik, Backpack, and After.js, with support from other prominent OSS contributors like Dan 'the man' Abramov, and Jari Zwarts and many others. Give Razzle a try, I'm sure you're going to love it!

Top comments (30)

isaacdlyman profile image
Isaac Lyman

Hi Avram, looks like you're new here. This kind of comment isn't allowed on and will be addressed by a moderator soon. Please review the community guidelines.

Sloan, the sloth mascot
Comment deleted
gndplayground profile image
Giang Nguyen

A lot of enterprise companies use React. I think it's better not throw in framework war.

asiby profile image
Abdoulaye Siby

Many of them are stuck with it and they are trying to live with it. So they keep hiring people with React skills to apply more band-aid on top of the existing one. That is giving people the impression that lots of companies needs React because it's the way to go. It's not.

puritanic profile image
Darkø Tasevski

After a quick look at your code on Github I've noticed that you're using jQuery (!) inside React, also, I'm not impressed with your Angular code either, React (I know) is far more readable.

I'll just say that you should get down to the earth for your own good 🙂


Thread Thread
Sloan, the sloth mascot
Comment deleted
revskill10 profile image
Truong Hoang Dung

Noone is talking about Razzle is because it just works on most cases. So, less time to chat chit and issues.

skaterdad profile image

This is probably true. There are a lot of great libraries and frameworks out there which get very few articles and discussion.

If you want your code to be discussed online, make it overly complicated!

andrewharpin profile image
Andrew Harpin

Tip for you Razzle is the name of a dodgy Porn magazine in the UK

vallerydelexy profile image

ah i see, youre man of culture as well

alanhylands profile image
Alan Hylands

I read the headline and thought I'd stumbled onto the wrong forum for a second!

roccoluke profile image
Luke Rocco

This article might be old but I want to express that razzle solved a lot of head aches for me. And my thoughts were exactly like the title of this article, why is no one talking about it?

I like both React and Vue JS and got to use Nuxt and Next as well. Don't get me wrong, they are both great tools but force you to use a specific frameworks and structure your application in a specific way.

Razzle on the other hand, solves the issue of adding SSR support to an existing application. And does not focus on one framework only (even though it looks like react is preferred). It was dead easy importing my ejected create react apps to razzle.

👏 🚀 @Razzle and @José for the article

scriptify profile image
Maximilian Torggler


puritanic profile image
Darkø Tasevski


That is some nasty generalization over there.

Your problem is a spaghetti mess that some dev left for you to maintain, not React per se.

I've seen some ugly and hell to maintain Angular and Vue projects too, so what now smartboy?

thekashey profile image
Anton Korzunov

There is untold story how razzle fixed your React-router.
The true story is short and sad -

josemunoz profile image
José Muñoz

I don't get your point, React-router was never broken for me, and that is a perfect use case for a template literal

thekashey profile image
Anton Korzunov

When looking for SSR solutions, I noticed the market forced me to abandon my way of doing routing, which meant I couldn't benefit from all the APIs that I get for free with my router.
I had to think about my existing projects, which had gained a certain level of complexity, and re-structure everything to fit in either Next's way of doing routing, or Gatsby's way of using templates for static content.

Yep, there is a little difference between Client Side and Server Side, especially in terms of routing and pre-loading data for the route.
That's not a big deal if your data-fetching layer (GraphQL) support it (via double rendering), and not a big deal if your routing is flat, and you can match route before rendering and do some job to get data you need... But react-router will not work out of the box, and razzle cannot change this moment - it is just wrapping your App with StaticRouter which makes it work, but not making it SSR - compatible.

sm0ke profile image
Sm0ke • Edited

Hello @Jose,

Razzle looks good, but I didn't find it easy to add it to an existing project. Can you point me pls to an existing tutorial?
Thank you!

Some comments may only be visible to logged-in visitors. Sign in to view all comments.

An Animated Guide to Node.js Event Loop

Node.js doesn’t stop from running other operations because of Libuv, a C++ library responsible for the event loop and asynchronously handling tasks such as network requests, DNS resolution, file system operations, data encryption, etc.

What happens under the hood when Node.js works on tasks such as database queries? We will explore it by following this piece of code step by step.