vite-plugin-ssr-config

This project provides a Vite plugin to support server-side rendering (SSR) for React applications. It allows for efficient SSR bundling and client-side rendering (CSR) for modern web apps.

vite ssr Vite plugin for SSR SSR + Vite SSR First Vite Plugin Ssr Examples and Templates Server-Side Rendering vite-plugin-ssr config

Framework-Agnostic

While the plugin is designed to be framework-agnostic, it comes preconfigured for React and is optimized for use with react-router-dom. The configuration can be easily modified to suit other routing libraries or use cases, should you wish to switch frameworks or libraries.

React Query Support

With built-in React Query support, you no longer need to manually define API endpoints in your server-side code. This feature simplifies server-side data fetching and eliminates the need for complex API configurations. You can rely on React Query to fetch and manage data on the client side, and let SSR handle the rendering seamlessly.

SEO Support with react-slotx

The plugin integrates react-slotx for dynamic head content management. Any page component can use <Slot name="head"> to register <title>, <meta>, Open Graph tags, or any other head elements. The root document renders them via <Outlet name="head" /> — both server-side (injected into the HTML stream) and client-side (kept reactive during navigation).

// In any page component
import { Slot } from "react-slotx";

export default function PostPage() {
  return (
    <>
      <Slot name="head">
        <title>My Post Title</title>
        <meta name="description" content="Post description" />
        <meta property="og:title" content="My Post Title" />
      </Slot>
      {/* page content */}
    </>
  );
}

Key Features

Overview

Project Structure

This repository includes the following packages:

  1. plugin: The core SSR plugin for Vite.
  2. app-basic: A basic SSR React app example.
  3. app-custom: A more advanced configuration with custom setup.

For detailed usage, refer to each package’s README.

Installation

To install and use vite-plugin-ssr-config:

  1. Clone the repository.
  2. Run:
yarn add vite-plugin-ssr-config -D
  1. Add the plugin to your Vite config:
import { defineConfig } from 'vite';
import react from "@vitejs/plugin-react";
import pages from "vite-plugin-pages";
import ssr from 'vite-plugin-ssr-config';

export default defineConfig({
  plugins: [
    react(),
    pages({
      routeStyle: "remix",
      dirs: "src/pages",
    }),
    ssr(),
  ],
});

Documentation

APP Basic

This app utilizes the following libraries:

APP Custom

This app utilizes the following libraries: