razzle

✨ Create server-rendered universal JavaScript applications with no configuration

11,102

865

11,102

137

View on GitHub View on NPM

Top Related Projects

create-react-app

102,511

Set up a modern web app by running one command.

remix

29,083

Build Better Websites. Create modern, resilient user experiences with web fundamentals.

vite

67,112

Next generation frontend tooling. It's fast!

Quick Overview

Razzle is a toolchain for modern static and dynamic websites and web applications. It's designed to abstract away complex configuration needed for server-side rendering (SSR) with React, providing a zero-configuration setup that works out of the box. Razzle allows developers to focus on writing React applications without worrying about build configuration.

Pros

Zero-configuration setup for server-side rendering with React
Supports both static and dynamic websites
Extensible through plugins and custom configurations
Works with most major React frameworks and libraries

Cons

Learning curve for developers new to server-side rendering
May be overkill for simple static websites
Limited community support compared to more established tools
Potential performance overhead for very large applications

Code Examples

Basic server-side rendering with Razzle:

// src/server.js
import express from 'express';
import React from 'react';
import { renderToString } from 'react-dom/server';
import App from './App';

const server = express();
server
  .disable('x-powered-by')
  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))
  .get('/*', (req, res) => {
    const markup = renderToString(<App />);
    res.send(`<!doctype html>
      <html lang="">
      <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta charset="utf-8" />
        <title>Welcome to Razzle</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
      </head>
      <body>
        <div id="root">${markup}</div>
      </body>
    </html>`);
  });

export default server;

Client-side entry point:

// src/client.js
import React from 'react';
import { hydrate } from 'react-dom';
import App from './App';

hydrate(<App />, document.getElementById('root'));

if (module.hot) {
  module.hot.accept();
}

Using environment variables:

// src/App.js
import React from 'react';

const App = () => (
  <div>
    <h1>Welcome to Razzle</h1>
    <p>
      API URL: {process.env.RAZZLE_API_URL}
    </p>
  </div>
);

export default App;

Getting Started

To start a new Razzle project, run the following commands:

npx create-razzle-app my-app
cd my-app
npm start

This will create a new Razzle project in the my-app directory and start the development server. Open http://localhost:3000 to view your application in the browser.

Competitor Comparisons

create-react-app

102,511

Set up a modern web app by running one command.

Pros of Create React App

Widely adopted and well-maintained by Facebook
Extensive documentation and community support
Seamless integration with React ecosystem

Cons of Create React App

Limited server-side rendering capabilities
Less flexibility for custom configurations
Ejecting required for advanced customizations

Code Comparison

Create React App:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

Razzle:

import express from 'express';
import React from 'react';
import { renderToString } from 'react-dom/server';
import App from './App';

const server = express();
server.get('/', (req, res) => {
  const html = renderToString(<App />);
  res.send(`<!doctype html><div id="root">${html}</div>`);
});

Key Differences

Razzle supports server-side rendering out of the box
Create React App focuses on client-side rendering
Razzle offers more flexibility for custom configurations
Create React App provides a simpler setup for beginners

Use Cases

Choose Create React App for quick prototyping and simple SPAs
Opt for Razzle when server-side rendering is required or for more complex applications

next.js

124,777

The React Framework

Pros of Next.js

Larger community and ecosystem, with more resources and third-party integrations
Built-in image optimization and automatic code splitting
Seamless integration with Vercel's hosting platform

Cons of Next.js

More opinionated framework, which may limit flexibility in some cases
Steeper learning curve for developers new to React or server-side rendering
Can be more complex to set up and configure for advanced use cases

Code Comparison

Next.js:

// pages/index.js
export default function Home() {
  return <h1>Welcome to Next.js!</h1>
}

Razzle:

// src/App.js
import React from 'react';
export default function App() {
  return <h1>Welcome to Razzle!</h1>
}

Both frameworks aim to simplify server-side rendering for React applications, but they take different approaches. Next.js provides a more structured and opinionated framework with built-in features, while Razzle offers more flexibility and control over the development environment.

Next.js is better suited for projects that require quick setup and deployment, especially when using Vercel's hosting. Razzle, on the other hand, is ideal for developers who want more control over their build process and server configuration.

Ultimately, the choice between Next.js and Razzle depends on the specific requirements of your project and your team's preferences for development workflow and tooling.

kit

18,419

web development, streamlined

Pros of SvelteKit

Built specifically for Svelte, offering seamless integration and optimized performance
Provides a more opinionated structure, leading to faster development and consistent project organization
Offers built-in features like server-side rendering (SSR) and API routes out of the box

Cons of SvelteKit

Limited to Svelte framework, whereas Razzle supports multiple frameworks
Steeper learning curve for developers not familiar with Svelte ecosystem
Less flexibility in configuration compared to Razzle's customizable approach

Code Comparison

SvelteKit routing example:

// src/routes/blog/[slug].svelte
export async function load({ params }) {
  const post = await getPostBySlug(params.slug);
  return { props: { post } };
}

Razzle routing example:

// src/App.js
import { Route, Switch } from 'react-router-dom';

const App = () => (
  <Switch>
    <Route exact path="/" component={Home} />
    <Route path="/blog/:slug" component={BlogPost} />
  </Switch>
);

Both SvelteKit and Razzle offer powerful features for building modern web applications, but they cater to different preferences and use cases. SvelteKit is tailored for Svelte development, while Razzle provides a more flexible, framework-agnostic approach.

remix

29,083

Build Better Websites. Create modern, resilient user experiences with web fundamentals.

Pros of Remix

Built-in routing system with nested routes and data loading
Server-side rendering (SSR) and client-side rendering (CSR) out of the box
Seamless integration with modern web APIs and progressive enhancement

Cons of Remix

Steeper learning curve due to its unique architecture
Less flexibility in project structure compared to Razzle's customization options

Code Comparison

Remix route example:

export default function Index() {
  return <h1>Welcome to Remix</h1>;
}

export function loader() {
  return json({ message: "Hello from loader" });
}

Razzle component example:

import React from 'react';

export default function Home() {
  return <h1>Welcome to Razzle</h1>;
}

Remix focuses on a file-based routing system with built-in data loading, while Razzle provides a more flexible setup where routing and data fetching are handled separately. Remix's approach leads to a more opinionated structure, potentially reducing boilerplate but requiring adherence to its conventions. Razzle, on the other hand, offers more freedom in how you structure your application and integrate various libraries.

vite

67,112

Next generation frontend tooling. It's fast!

Pros of Vite

Faster development server startup and hot module replacement (HMR)
Native ES modules support, reducing bundle size and improving performance
Broader framework support, including Vue, React, Svelte, and more

Cons of Vite

Less opinionated structure, requiring more configuration for complex setups
Newer project with a smaller ecosystem compared to Razzle
May require additional setup for server-side rendering (SSR) applications

Code Comparison

Razzle:

// razzle.config.js
module.exports = {
  modify: (config, { target, dev }, webpack) => {
    // Modify the webpack config here
    return config;
  },
};

Vite:

// vite.config.js
import { defineConfig } from 'vite'

export default defineConfig({
  // Configure Vite here
})

Summary

Vite offers faster development experience and broader framework support, while Razzle provides a more opinionated structure for React applications. Vite's configuration is more flexible but may require additional setup for complex scenarios. Razzle has a more established ecosystem, particularly for server-side rendering applications. The choice between the two depends on project requirements, preferred framework, and development priorities.

nuxt

54,014

The Intuitive Vue Framework.

Pros of Nuxt

More mature and widely adopted framework with a larger ecosystem
Built-in server-side rendering (SSR) and static site generation (SSG) capabilities
Extensive documentation and community support

Cons of Nuxt

Steeper learning curve for developers new to Vue.js
More opinionated structure, which may limit flexibility in some cases

Code Comparison

Nuxt:

// nuxt.config.js
export default {
  modules: ['@nuxtjs/axios'],
  axios: {
    baseURL: 'https://api.example.com'
  }
}

Razzle:

// razzle.config.js
module.exports = {
  modify: (config, { target, dev }, webpack) => {
    // Custom modifications to the webpack config
    return config;
  },
};

Nuxt provides a more declarative configuration approach, while Razzle offers greater flexibility in modifying the webpack configuration directly.

Nuxt is specifically designed for Vue.js applications, offering a comprehensive framework with built-in features like automatic code splitting and asynchronous data fetching. Razzle, on the other hand, is more framework-agnostic and focuses on providing a minimal setup for server-side rendering with various front-end libraries.

While Nuxt excels in Vue.js development with its extensive ecosystem, Razzle offers more flexibility for developers who prefer a less opinionated approach or work with multiple front-end frameworks.

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

repo-banner

Razzle-status

Universal JavaScript applications are tough to setup. Either you buy into a framework like Next.js or Nuxt, fork a boilerplate, or set things up yourself. Aiming to fill this void, Razzle is a tool that abstracts all the complex configuration needed for building SPA's and SSR applications into a single dependency--giving you the awesome developer experience of create-react-app, but then leaving the rest of your app's architectural decisions about frameworks, routing, and data fetching up to you. With this approach, Razzle not only works with React, but also Preact, Vue, Svelte, and Angular, and most importantly......whatever comes next.

Getting Started

Visit https://razzlejs.org/getting-started to get started with Razzle.

Examples

Razzle has many examples, we might have one that fits your needs

See: The examples

Documentation

Visit https://razzlejs.org/ to view the documentation.

Getting help

If you get stuck, check out Razzle's GitHub Discussions. In addition, #razzle-afterjs on the Formium Community Discord Server is a great way to get help quickly too.

Contributing

Please see our CONTRIBUTING.md.

Inspiration

Author

Jared Palmer

Contributors

Thanks goes to these wonderful people (emoji key):

Jared Palmer - @jaredpalmer
- Contributions: question, code, design, doc, example, ideas, review, test, tool
Nima Arefi - @Nimaa77
- Contributions: question, code, doc, example, ideas, review, test, tool
Ãyvind Saltvik - @fivethreeo
- Contributions: question, code, example, ideas, review, test, tool
Jari Zwarts - @jariz
- Contributions: question, code, ideas, plugin, review
Dan Abramov - @gaearon
- Contributions: code, ideas
Eric Clemmons - @ericclemmons
- Contributions: code, ideas
Zino Hofmann - @HofmannZ
- Contributions: example
Lucas Terra - @lucasterra
- Contributions: code, example, plugin
Ray Andrew - @rayandrews
- Contributions: code, example, plugin
Heithem Moumni - @heithemmoumni
- Contributions: code, example, plugin

This project follows the all-contributors specification. Contributions of any kind welcome!

MIT License

Top Related Projects

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

Top Related Projects

Quick Overview

Pros

Cons

Code Examples

Getting Started

Competitor Comparisons

Pros of Create React App

Cons of Create React App

Code Comparison

Key Differences

Use Cases

Pros of Next.js

Cons of Next.js

Code Comparison

Pros of SvelteKit

Cons of SvelteKit

Code Comparison

Pros of Remix

Cons of Remix

Code Comparison

Pros of Vite

Cons of Vite

Code Comparison

Summary

Pros of Nuxt

Cons of Nuxt

Code Comparison

Convert designs to code with AI

README

Getting Started

Examples

Documentation

Getting help

Contributing

Inspiration

Author

Contributors

Top Related Projects

Convert designs to code with AI

NPM DownloadsLast 30 Days