Scaffold Server-Side Rendering Web Applications with Meteor and Maka-Cli

www.maka-cli.com

I hope you enjoyed my previous article on how to get started with Maka-CLI! I’m going to be talking about some of the other configurations available when setting up a new project over the next few days. Today, I’d like to show you how easy it is to create a web application configured for server-side rendering (buzz buzz), or SSR for short.

I won’t go into what SSR is — if you’re here you’ve likely already heard about it, or someone has told you to “just do it,” and you may not know what “it” even is. Either way, it’s okay. I will tell you what it’s good for and where I believe it best used. SSR is for speeding up page load times, which improves the user experience in those precious first few milliseconds when they arrive at your site. It’s also for helping search engines index your site (search engine optimization). In my experience, SSR sites should be straightforward, with as little client-side processing as possible. Avoid using it for things like maps, graphs, drawings, or WebGL of any kind. These will likely not work or will put so much stress on your site; you won’t make it out the door.

Without further ado, let’s get started making an SSR NodeJS application with React as a client! In your development area, tell Maka to create “my-ssr-app” and pass it the SSR flag (if this seems like I skipped something, it’s likely because you didn’t read my previous article):

$ maka create my-ssr-app --ssr=true

Wait for that to finish … aaaaaaaand … done! You’ve just created a new web application with server-side rendering enabled, and you may start building your site. KTHXBYE!

Do you ask? I guess that’s expected. Other than adding in necessary packages for working with server-side rendering, there are two significant differences between creating a web application without the SSR flag and with the SSR flag in your project structure. One is that the routes and templates are no longer only on the client. They are available for both the client AND the server in a particular folder called “lib.” Second, you don’t get to use .css files anymore, unfortunately, because of the way MeteorJS handles .css files on the server. Last I checked it’s an item in the feature request list.

Routes and templates located in lib folder

A little background on what “lib” means to MeteorJS applications. “Lib” is a folder that MeteorJS interprets as code that is accessible to both the client (your web browser) and the server (NodeJS). The code in the “client” and “server” folders, by contrast, are isolated, and never the two shall meet.

How can you tell if this is working and I haven’t just waved my hands around in your face? Easy, we can disable JavaScript on our web browser and see if anything shows up. This is a valid test because we’re using React, and JavaScript drives everything. No JavaScript, no text. SSR is a particular case because before JavaScript gets to the page, the server pushes up rendered static HTML as a placeholder. You can’t interact with it, but it gives you something to view while javascript loads.

So with one command, you’ve scaffolded an entire NodeJS web application running React as a client with server-side rendering in under 10 minutes (and you still have all your hair!). Now you can get to work on adding content to your site. Just keep in mind, .css files aren’t supported at the moment by MeteorJS. If you head on over to the feature list and make some noise, I’m sure they’d love it.

Up next, I’ll show you how to use Maka-CLI to setup Material-UI on your site! Until then, get back to work.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store