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

serialize-server-state

v1.0.0

Published

A fast, secure serializer for server JSON state.

Downloads

5

Readme


Getting started

Install the dependencies

In your terminal:

$ yarn add serialize-server-state
# or
$ npm install serialize-server-state

Write your code

See below for the Redux Server Rendering example adapted to use the serialize-server-state package:

const serialize = require("serialize-server-state");

function renderFullPage(html, preloadedState) {
  return `
    <!doctype html>
    <html>
      <head>
        <title>Redux Universal Example</title>
      </head>
      <body>
        <div id="root">${html}</div>
        <script>
          window.__PRELOADED_STATE__ = ${serialize(preloadedState)};
        </script>
        <script src="/static/bundle.js"></script>
      </body>
    </html>
    `;
}

Motivation

This package attempts to act as a balance between security and performance.

When server rendering JSON state it can be very easy to stumble upon cross-site scripting issues so care is needed. See the Redux Security Considerations for discussion on this topic.

Packages such as jsesc and serialize-javascript exist and handle a wide range of security issues very well (from XSS to unicode issues) but are not very performant - for a lot of use-cases these packages almost offer too much.

If you are attempting to render state which you know to be JSON serializable, and will be assigning to a value within a script context, then this package might be for you.

serialize-server-state is up to 2x faster than the above packages for serialization, and implements the optimally performant deserialization technique by rendering the state as a string within JSON.parse(), see this article on Redux state transfer performance.

This package mitigates XSS by following the WHATWG HTML Specification recommendation and gracefully handles awkward characters such as line separators with the appropriate escaping.

Note: Please always assess your use-case for security before using this package.

Benchmark

$ yarn bench

jsesc x 125 ops/sec ±1.97% (79 runs sampled)
serialize-javascript x 334 ops/sec ±1.96% (88 runs sampled)
serialize-server-state x 646 ops/sec ±1.17% (89 runs sampled)
The fastest option is serialize-server-state

Machine specs:

$ system_profiler SPSoftwareDataType SPHardwareDataType

Software:

    System Software Overview:

      System Version: macOS 12.6.2 (21G320)
      Kernel Version: Darwin 21.6.0
      Boot Volume: Macintosh HD
      Boot Mode: Normal
      Secure Virtual Memory: Enabled
      System Integrity Protection: Enabled

Hardware:

    Hardware Overview:

      Model Name: MacBook Air
      Model Identifier: MacBookAir7,2
      Processor Name: Dual-Core Intel Core i5
      Processor Speed: 1.8 GHz
      Number of Processors: 1
      Total Number of Cores: 2
      L2 Cache (per Core): 256 KB
      L3 Cache: 3 MB
      Hyper-Threading Technology: Enabled
      Memory: 8 GB
      System Firmware Version: 476.0.0.0.0
      OS Loader Version: 540.120.3~22
      SMC Version (system): 2.27f2

Contributing

Please check out the CONTRIBUTING docs.

Changelog

Please check out the releases page.


License

serialize-server-state is licensed under the MIT License.