Sapper Tutorial #5 - Server Code vs Client Code

Key Takeaways

all right there so in this lesson i just want to take a few minutes to talk about the way sapper runs component javascript so if you've used svelt before you know that each component can have at the top a script tag which is going to be any kind of script for that particular component right now does this script tag run in the browser or on the server when you use felt it's always in the browser but in our case when we're using sapper the answer is potentially both it can run on the server and in the browser remember for the initial request to a website using support the component is pre-rendered on the node server at first so if we entered the website at mysite.com forward slash jobs which is this component right here this index component inside jobs then the jobs route component is pre-rendered on the server first right and the resulting html and javascript bundle for the rest of the app is sent to us in the browser so initially for that first request this script right here would always run on the server to help pre-render the component template and inject any dynamic data into it thereafter though when we click on links about the site and go to different pages all of the rendering of the new route components like this is done in the browser like a typical spa a typical single page application so at that point the script tags all run in the browser all these script tags right and not on the server so it's entirely true that the scripts can run on the server and in the browser the first request on the server and thereafter only ever in the browser so let's see this in action so what i'm going to do is just at the top in the script is a simple console log to say what page we're on and in this case it's the jobs one and i'm going to copy this script and i'm going to save this and paste it in every other route component we have so inside about as well let me paste this at the top and open that back up change this to about and then let's go into the contact one again let's go to the top and paste this in and this is going to be contact instead and then finally let's go to the home page and at the very top we'll paste this in again and change this to home okay so if it runs in the browser then it's always going to be logged over here right and you can see that right here on the about page but if it's logged on the server if this script runs on the server then this is the server log down here and we can actually see that as well over here now what i'm going to do is just go to a few different pages right and notice they're all being logged in the console over here but they're not being logged again down here they only logged initially when the server restarted when we saved this project the server restarted and that request was made fresh from the browser automatically that's the only time they run because that was the first request to the server since it restarted for this web page now then if i was to refresh so send a fresh request to the server from this page over here then we should see it logged over here what page we're on or what page we're refreshing so let me do that we see in the browser as well it always happens in the browser when it gets here but we should now see it on the server it runs in both in this case for that first request but again if we go to other pages then we don't see those logged on the server it was just that initial request where this ran on the server let's try it again with a different page i'm going to go to contact and refresh to send a fresh new request to the server and when we come down here we can see now contact is logged in the server terminal and also when we move around we get them here but we don't get them here just that initial request for the contact page so this is something you need to constantly keep in mind when you're writing your code inside these scripts because a user could enter your site from any entry url you have any kind of route you've set up therefore potentially any component can be initially pre-rendered on the server and all the javascript code in that component is going to be run on the server now the only exception to this is if you place your code inside a couple of different lifecycle hooks like on mounts so code inside a hook like that is never going to run on the server because the hook is part of the component life cycle in the browser so it's only ever going to run the code inside the browser let me demo this let me first of all up here import something so i'm going to say import and we're going to import the on mount hook right and that is going to be from svelte all right so this on mount hook fires a function when the component has mounted the dom and that can't happen on the server so it's never going to trigger on the server it's only going to trigger in the browser so if i say for example on mount right here and then passing a function to fire when we've mounted the dom and in here i can say safe for browser only code eg fetch down here i could say console.log only ever runs in the browser okay so this code is never actually going to run on the server and i can demo that if we save this and this is the index page if we come over here now and go to the home page then refresh to send a fresh request we get this logged over here but it's not going to be logged over here only this bit is which is this lock so this will never run on the server okay so then what does all this mean in practical terms well it means since any of this code outside of on mount right here could potentially run on the server we need to be careful about the code that we write for example we couldn't use the window object or method such as fetch because those apis don't exist on the server and that will fail so let me demo this let me try and fetch something i'm just going to pass in an endpoint from jason placeholder right here okay if i save this now and try to send a request to the home page and it says over here fetch is not defined so fetch isn't defined on the server we can't use it on the server all right but however if i place that inside on mounts this will work because right here we're waiting for the component to mount to the dom before we fire this so therefore it has to be in the browser and we don't get an error anymore okay when we refresh there's no error and yeah we don't get any results because we're not doing anything with this fetch but either way it's safe to run this fetch right here so always be mindful that your code could be running on the server and in the browser as well now there is another type of special script that we can add to components which always runs before this script right here and we use that to do things like preload data so we're going to talk about that in the next video