loading...
Cover image for Why is No One Talking About Razzle?

Why is No One Talking About Razzle?

jdmg94 profile image José Muñoz ・3 min read

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!

Posted on by:

jdmg94 profile

José Muñoz

@jdmg94

Software Engineer, love coffee and coding, interested in engaging UX and elegant problem-solving.

Discussion

pic
Editor guide
 

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

 
[deleted]
 

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

 

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.

 
 
[deleted]
 
[deleted]

Sorry, I really respect your opinion about it, but I can't agree with you have said. If you don't like to use React, just use another framework and avoid to say bad things about frameworks that you doesn't like. React is very useful for me.

 

Thanks for writing this article.

It's tempting to pick nuxtjs or nextjs to bootstrap your project, but you will soon feel the pain of having to learn the ins and outs of nuxt/next instead of learning an arguable more practical skill such as webpack. You will also sooner or later run into limitations of these high level abstractions and start fighting it all the way to project completion and maintenance. ( at least on moderately complex real world sites)
Razzle sounds like a great solution to easy the burden of setting up SSR and still be close to the metal.

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 🙂

bye

[deleted]
 

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

 

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!

 

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

 

ah i see, youre man of culture as well

 

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

 

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

 

badass

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?

 

There is untold story how razzle fixed your React-router.
The true story is short and sad - github.com/jaredpalmer/razzle/blob...

 

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

 

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.

 

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!

 
[deleted]
 

You're free to say that React is bad, but telling people how they're just messy and like to write unmaintainable code if they're using React is really dumb thing.

Beside that, saying that React is bad is useless. Bad because of what? I have used Angular, React and Vue and all of them have certain advantages / disadvantages.

I noticed you were criticizing mixing of JS and HTML code; it's not like that actually. What you see as HTML in the React app is actually a syntactic sugar over function calls that create HTML elements (JSX). That allows us to do many thing which wouldn't be possible by plain mixing of HTML and JS (or would be too hard to do).

I would say that Angular is better choice for writing huge web applications because it allows better separation of concerns through services, but that doesn't have to be the case - I have been interviewed by the company which manages dozens of gambling sites with hundreds of microservices in the back-end and uses React on the front-end.

 
Sloan, the sloth mascot Comment marked as low quality/non-constructive by the community View code of conduct

You're right though. React is garbage.