I just started using ExpressJS and Jade and I was sure that everything is server-side but this post makes me a little bit confused(because my site behaves like Client-side scenario): https://stackoverflow.com/a/12291675
I guess that node.js only sends whole site once and then sends JSON data, because the rest is loaded in browser cache?
So it would be helpful if someone describe this mechanism to me.
You can code an express.js app to render jade templates into HTML on the server side and send HTML to the browser. This is the more traditional approach. However, jade is also capable of running in the browser, so your express app can send jade templates (either as jade syntax text or pre-compiled javascript function source code) to the browser and also send JSON data to the browser and let the browser render the jade template plus JSON data into HTML to be inserted into the DOM. Both are possible. Neither are prescribed by express or jade. It's your choice.
Related
I'm unsure if I'm asking the right question here. I apologize in advance for my ignorance, I'm only a year into teaching myself full stack JS and web app architecture and I'm trying to understand this on a granular level. Previous attempts to ask this question seem to offend some devs, so maybe it's a dumb question.
I'm trying to understand how to, or if its possible to, explicitly designate or assign a specific file or block of javascript to process/run/execute on a server vs on the client/browser.
Writing some javascript in a an app.js file and running node app.js seems to still expose that script to the browser, viewable in the Sources tab in Dev Tools.
PHP is interpreted by a server and then sends static HTML to the client. Is this "pre-processing", the equivalent of Server Side Rendering with Javascript App frameworks? Or Is writing a .php file inline with HTML server-side (like you'd see in Wordpress) more equivalent to inline javascript client side? And there is a different method to have JS interpreted server-side?
I've been reading about GENERATE_SOURCEMAP, but that seems more like it's used to hide client-side JS modules.
Other possible wordings of this question
How to not expose server side Javascript to the client?
How to run/execute Javascript on a server vs in browser?
I am NOT ASKING for the definition of server-side vs client-side JS, or for suggestions of server side application frameworks.
Again, I think i've confused myself or missing something very basic. Maybe the only answer is to segment your private web application from your client application and access via API. Thank you for any help.
Summary: Your JavaScript executed by the node daemon on the server side is not visible on the client side, the only thing visible is the output of your JS.
When you create a file with the .php extension you need an executable that executes this file, to return the result to the client to render it.
For example :
create a php file index.php with the following syntax:
<?php
echo '<script>console.log("HelloWorled")</script>'
?>
to run this file, you need the PHP daemon (the php interpreter) to run the file to get this output <script>console.log("HelloWorled")</script>
next; the output will be returned to the client to be execute on client browser;
In the case of PHP this operation is managed directly by the http server such as nginx via this configuration:
server{
location ~ \.php$ {
include snippets/fastcgi-php.conf;
fastcgi_pass unix:/run/php/php<version>-fpm.sock;
}
}
which you will find inside the /etc/nginx/sites-available/default file
This rule simply tells nginx to make all files with the .php extension go through the php proxy to be executed and then return only the result of the execution to the client.
You have to imagine the exact same thing with nodejs.
I created an index.js file with the following syntax :
....
process.write( '<script>console.log("HelloWorled")</script>');
....
running the file with node index.js you will just get the output <script>console.log("HelloWorled")</script> which your server (e.g. expressJS) will send back to the client to run it client side to get los same result of the php code.
NOTES :
YOU DON'T NEED TO EXPOSE YOUR JS CODE, YOU NEED ONLY A PROXY TO SERVER IT Like PHP WITH NGINX (read more about expressJS and the other nodejs servers frameworks).
IF you need to expose a client side scripts,images,styles, you need to specify it in your proxy configuration
I am loading an Angular app in a .NET MVC .cshtml file.
The Angular app is all compiled by the webpack compiler (so it's static content at runtime) and the .cshtml only loads the app.js and an Angular component.
Now the first thing the app does when it loads on the client is go async to the server to get some data (in this case only a small call to get a total count of items).
And that annoys me, because when the page was loaded from the server, that same data was already present, in cache, on that server. So the server gives all JS and HTML to the client, without that 'itemcount' the server already has, and then the client has to go back to the server to get that data.
So what I would like to do is let the server give all the JS and HTML, AND that 'itemcount'. But I do not know how.
I can't inject it in the JS, because that is static. I could inject it into the HTML in a script tag, but the Angular app can't read it then.
So the only thing I could come up with is to generate, on the server, a JS file with the itemcount, and then load that JS file with a script tag, and then the App could also read it because it's a kind of global variable (which design time the Angular app doesn't know, so that kind of doesn't look nice).
Is there a better/nicer approach?
I have a web application with a client that receives data from a server. I have the data in NodeJS, but I want to pass the data to a Javascript file. The Javascript file is included in a HTML file, so I can't make the files communicate with eachother.
I am new to NodeJS, so it can be a stupid question, but anyones help is appreciated
This is for a project where I need have a data stream, and I need to pass it into a web application. I tried to pass the data to different page inside my application and then I tried to get that data on that page inside my web application via Javascript, but I couldn't make that work. I'm not even sure if its possible at this point.
Your node server can't communicate with your front-end without a specific way of communication like websocket, you have many other way to communicate with your front-end as node-server, take a look at server send event for example.
By the way your front-end can call your node server more easely with a get request as said #tomerpacific in comment.
For that you have to open a route with your express app. Routing with express
And for call it on a GET request, for that you can use the XMLHttpRequest, and if you have implemented jQuery on your front, you can use Ajax jQuery.
I have created my blog as a single page application using mithril framework on the front end. To make queries I've used a rest API and Django at the backend. Since everything is rendered using javascript code and when the crawlers hit my blog all they see is an empty page. And to add to that whenever I share a post on social media for instance all Facebook sees is just an empty page and not the post content and title.
I was thinking of looking at the user agents and whenever the USER-AGENT is from a crawler I would feed it the rendered version of the pages but I'm having problems implementing the above method described.
What is the best practice to create a single page app that uses rest API and Django in the backend SEO friendly for web crawlers?
I'm doing this on a project right now, and I would really recommend doing it with Node instead of Python, like this:
https://isomorphic-mithril.mvlabs.it/en/
You might want to look into a server-side rendering of the page that crawlers visit.
Here is a good article on Client Side vs Server Side
I haven't heard of Mithril before, but you might find some plugins that does this for you.
https://github.com/MithrilJS/mithril-node-render
This might help you : https://github.com/sharjeel619/SPA-SEO
The above example is made with Node/Express but you can use the same logic with your Django server.
Logic
A browser requests your single page application from the server,
which is going to be loaded from a single index.html file.
You program some intermediary server code which intercepts the client
request and differentiates whether the request came from a browser or
some social crawler bot.
If the request came from some crawler bot, make an API call to
your back-end server, gather the data you need, fill in that data to
html meta tags and return those tags in string format back to the
client.
If the request didn't come from some crawler bot, then simply
return the index.html file from the build or dist folder of your single page
application.
I am building an app - front end = backbone , server = node.js.
In order to improve performance, I am thinking on rendering first page from node/express server, using some templating engine. On client I want to do all iterations via ajax requests (receiving json) and, again, using template to render the data (actually it is the same template).
Is there a way to reuse the same template on client and server? It will be easier to maintain / cache. The first load of the template on the server has other advantages like server routing + option to determind which template to return according to user agent.
Thanks!!
You can use ECT template engine. ECT designed for use on client and server without any modifications in templates and code. Also ECT most fastest template engine for now.