Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Custom injector for server-side rendering (loosing treeshakeable ability)

See original GitHub issue

Currently we need to use a custom injector to be able to retrieve all styles for SSR.

import originalInjector from 'rollup-plugin-styles/dist/runtime/inject-css';
const injectCss = (css) => {
    if (typeof document === 'undefined') {
        if (global.ssrStyles) global.ssrStyles.push(css);
        else global.ssrStyles = [];
    }
    originalInjector(css, {
        singleTag: true,
    });
};

export default injectCss;

Then we get the global.ssrStyles on our Next.js _document.tsx

import Document, { Head, Html, Main, NextScript } from 'next/document';

export default class MyDocument extends Document {
    static async getInitialProps(ctx: any) {
        const initialProps = await Document.getInitialProps(ctx);

        //@ts-ignore
        const globalStyle = global.ssrStyles.join(' ');

        return {
            ...initialProps,
            styles: (
                <>
                    {initialProps.styles}
                    {[
                        <style
                            dangerouslySetInnerHTML={{ __html: globalStyle }}
                            id="server-side-styles"
                        />,
                    ]}
                </>
            ),
        };
    }
    render() {
        return (
            <Html lang="fr">
                <Head />
                <body>
                    <Main />
                    <NextScript />
                </body>
            </Html>
        );
    }
}

My rollup-plugin-styles config (preserveModules enabled):

 styles({
    autoModules: true,
    minimize: true,
    mode: [
        'inject',
        (varname) => {
            const pathInjector = path.resolve('./tools/rollup/inject-css.js');
            return ` import injectCss from '${pathInjector}';injectCss(${varname})`;
        },
    ],
}),

I didn’t find a better way to properly inject my css on server-side. But with this approach we completely loose the ability to use the treeshakeable option.

Do you think that there is a better way to inject our css on server-side render ?

Issue Analytics

State:
Created 2 years ago
Reactions:6
Comments:6 (1 by maintainers)

Top GitHub Comments

3reactions

jpapinicommented, Jun 7, 2021

Any update of this ?

1reaction

814k31commented, Aug 28, 2022

I havent done server side rendering

However I’ve been playing around with using this plugin and @emotion/css for injection instead of the standard injection So I’m going to throw this here because it may spark ideas of using @emotion to do some server side rendering stuff

styles({
    mode: [
        "inject",
        (varName) => `
            const { injectGlobal } = require('@emotion/css');
            injectGlobal(${varName});
        `,
    ],
    autoModules: true,
    modules: true,
}),

You may be able to use docs from emotion to achieve what you’re looking for https://emotion.sh/docs/ssr

Top Results From Across the Web

Using with server side rendering in react and webpack tree ...

The server side rendering docs (https://fontawesome.com/how-to-use/server-side-rendering) don't seem particularly relevant to when using ...

Hierarchical injectors - Angular

With @Injectable() providedIn , optimization tools can perform tree-shaking, which removes services that your application isn't using. This results in smaller ...

Tree Shaking - webpack

Tree shaking is a term commonly used in the JavaScript context for dead-code elimination. It relies on the static structure of ES2015 module...

@angular/platform-server | Yarn - Package Manager

Fast, reliable, and secure dependency management.

Known Problem Report as of Dec 19 2022 4:00AM - Agilent

CE Method ChemStation. Client Report Rendering ColumnComp Driver Companion Control Panel Custom Fields Custom Reports DAD/MWD Driver Dashboard Data Analysis