npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

webpackssrplugin

v0.3.0

Published

SSR support for webpack

Downloads

20

Readme

Webpack 5 SSR Plugin

Key Features

  • Perform SSR Process During Development: This Webpack 5 plugin facilitates Server-Side Rendering (SSR) during development, enabling efficient server-side rendering of your web applications.

  • Static Page Generation with React SSR: Easily create static pages using React SSR (Server-Side Rendering) with the help of this plugin.

  • Versatile SSR Support: This plugin is suitable for various SSR use cases, including SSR in Express with React Hydration on the frontend, making it adaptable to a wide range of applications.

Usage

Install

npm install webpackssrplugin

Update webpack config

const WebpackSSRPlugin = require('webpackssrplugin');
...
plugins: [
    ...
    new WebpackSSRPlugin(),
    ...
]
...

Use

In your HTML file, add the following tag to incorporate SSR into your application:

<SSR src="./path/to/app/ssr.jsx" args="./path/to/ssr.args.js" wrapperClass="app" wrapperTag="div" />

This will:

  • compile ssr.jsx using esbuild
  • pass the output from ssr.args.js to the default export function of ssr.jsx bundle as a parameter
  • replace the <SSR /> tag with the markup build this way

Example

Basic Vanilla JS example.

  • tag placed in the html file
<SSR src="./src/components/component.ssr.js" args="./src/components/component.args.js" wrapperClass="mb-2 p-4 app" wrapperTag="aside" />
  • source of component.ssr.js
const serverCall = async (args) => {
    return `<p>Hi ${args?.name ?? 'user'}!</p>`;
};

export default serverCall;
  • source of component.args.js
exports.default = () => {
    return {
        name: `JOHN`,
    };
};
  • html output that replaces the <SSR />
<aside class="mb-2 p-4 app" ><p>Hi JOHN!</p></aside>

React example with hydration

A bit more complex example that uses fetch to get data from an API and pass it to the component as props.

  • tag placed in the html file
<SSR src="./src/components/Page/page.ssr.jsx" args="./src/pages/index.args.js" wrapperClass="app" wrapperTag="div" />
  • source of page.ssr.jsx
import React from 'react';
import {Page} from './components/Page';
import ReactDOMServer from 'react-dom/server';
import fetch from 'node-fetch';

const serverCall = async (args) => {
    const requestData = await fetch(args.dataAPI);
    const data = await requestData.json();

    return ReactDOMServer.renderToString(<Page {...args} data={data} />);
};

export default serverCall;
  • source of component.args.js
exports.default = (envFile) => {
    require('dotenv').config({
        path: envFile,
    });

    return {
        dataAPI: `http://${process.env.APIHOST}${process.env.DATAAPI}`
    };
};
  • html output that replaces the <SSR />
<div class="app">{<Page /> component SSR markup}</div>

Plugin options

  • ssrTagRegex - regex used to grab the tag to be replaced by the plugin. Default:
/<SSR (.+?) \/>/g
  • createDataProps - if set to true will add an additional atribute data-props to the output wrapper that will containt serilized arguments. Can be usefull for hydration. This can be overwritten by data-printdataprops="{true|false}". Defualt: false
  • verbose print additional debug output. Default: false
  • metaDisplay print esBuild metadata output. Default: false
  • metaFile store esBuild metadata output to file. Default: false
  • envFile this value will be passed as an argument to the default export from the file passed in args parameter. Can be used to require a different .env file depending on the type of build - development or production. Default: .env

<SSR /> tag attributes

  • src - path to the input js file to bundle and SSR
  • args - path to js file responsible for building the arguments
  • spreadArgs - if true it will spread the output of args object to separate attributes
  • esmFunction - when provided a function with that name will be called - this must me an async function from the export default. It also changes the bundle type from commonjs to esm if provided
  • wrapperClass - class of the wrapper tag
  • wrapperTag - tag type for the wrapper
  • data-printdataprops - if true will print the data-props - it can overwrite createDataProps setting

Versions:

  • 0.3.0 - major changes:
    • add option to pick output bundle format: ES or CommonJS
    • make it possible to not specify a wrapper around output html
    • make it possible to pass multiple arguments to the SSR functions via arguments
  • 0.2.[5,6] - minor fixes
  • 0.2.4 - add envFile setting
  • 0.2.3 - minor fixes
  • 0.2.2 - add metafile display and/or file generation for bundle
  • 0.2.0 - add data-printdataprops attribute to override createDataProps for individual items
  • 0.1.2 - add args["_"], add verbose configuration option
  • 0.1.1 - update docs
  • 0.1.0 - fix naming conventionc, change chalk version
  • 0.0.1 - initial version

Donate

If you find this piece of code to be useful, please consider a donation :)

paypal