Server and client code isolation

In the server-side render application, we keep the code for the server and the client in the same repository. Every so often, it may happen that we accidentally bundle the server-side code in the client-side build or vice versa. In such situation, we may increase the client-side bundle’s size, or even expose some security details to the client. To avoid that, we should isolate the server-side or the client-side only modules by using .server.ts(x) or .client.ts(x) suffixes, respectively.

@ssr-tools/core is configured to ignore .server.ts(x) files on the client-side, and .client.ts(x) files on the server-side. With that configuration, if you try to import the module into the wrong environment, you’ll get an error message informing you that the wrongly imported module doesn’t exist. That’s because the bundler does not even consider the module from the different environment, it just ignores it.

The files without .server.ts(x) or .client.ts(x) are considered common, so they’re available in both environments.