I am creating a web application where I want to display hundreds of images. I am using NodeJS with the Express Framework.
How do I send images from server to client?
Edit: If I place all images in the public directory, are they automatically send to the browser if the page is rendered or are GET requests generated in time if those images are needed?
Are you required to use express? Usually, static files are better served using a proper web server (like nginx or apache) along with your node/express application or some kind of cdn. In the client you could configure how your images are requested to avoid loading all of them at the beginning, either only downloading on demand or doing non-blocking requests
Related
I would appreciate if someone could clarify if it is necessary for hosting server to have node.js support in order for Angular Universal to work. And will I need to upload both browser and server folder in dist to the hosting. If yes, any recommendations on hosting a which offer such support? Secondly is there another way apart from node.js to make server side rendering to work?
Before answering this question, lets understand some basics of SSR and CSR in a layman language.
CSR or Client-side rendered
When a web-application gets rendered on the browser (Client-side). Here browser downloads all the html css and js first. Than the JS(your-some-awesome-framework) runs on browser and decide how the final webpage will look and act.
SSR Server-side Rendering
When a web-application gets rendered on the server (Server-side). Here the JS(your-some-awesome-framework) does most of its work on server already. So on your browser you gets the webpage without any delay of your JS booting and binding and rendering.
Now there are two types of rendering -
Dynamic SSR and Static Pre-rendering SSR
Dynamic SSR
when a live server dynamically generate and serialize the application. When a user hit a URL of website , the server first generates the webpage and serve the content.
Static Pre-rendering SSR
when there is already a pre-rendered static files and the browser simple serve those files.
Now comes the answers to your question in regard to angular framework.
Is it necessary for hosting server to have node.js support in order for Angular Universal to work ?
For Static Pre-rendering SSR - NO, there is no such need.
For Dynamic SSR - technically Yes, see below
And will I need to upload both browser and server folder in dist to the hosting ?
For Static Pre-rendering SSR - browser folder on any server which can host files
For Dynamic SSR - server folder on a nodeJs support server.
is there another way apart from node.js to make server side rendering to work?
There are some ways to run node through ASP.NET
Core and other options too. But for dynamic ssr nodeJs will come the the way.
Does anyone have any idea, why these three points are introduced and how we can implement this if we decide to separately deploy spring boot and SPA?
Calls to / serve static assets (from the front-end), which should not
be cached by the browser.
Calls to /app (which contains the
client-side application) and to /content (which contains the static
content, like images and CSS) should be cached in production, as
those assets are hashed.
Calls to a non-existant route should forward
the request to index.html. This is normally handled in the backend
through ClientForwardController.
They explain how you should handle the HTTP requests that point to the static parts.
2 first points may be configured in your reverse proxy for example.
Last point is a configuration of the RP but also of the router part of your js framework.
I have a web-application using nginx as a reverse-proxy and using the express framework as my backend in node.js. I am confused which is the web server. I use react, so the application features client side rendering, and nginx holds these files should it make a difference.
according to developer.mozilla.org
On the software side, a web server includes several parts that control how web users access hosted files, at minimum an HTTP server. An HTTP server is a piece of software that understands URLs (web addresses) and HTTP (the protocol your browser uses to view webpages). It can be accessed through the domain names (like mozilla.org) of websites it stores, and delivers their content to the end-user's device.
&
A web server first has to store the website's files, namely all HTML
documents and their related assets, including images, CSS stylesheets,
JavaScript files, fonts, and videos.
Taking this into consideration, I would say that Nginx is the web-server since it holds the html file. However, I really am not sure. Is it one of the two, both or is it a grey-zone?
Web servers provide web pages(HTML) with CSS, JS files that are required to render those pages. In your case, NGINX acts as a web server since it serves with HTML files.
NodeJS has a built-in HTTP module which supports to work with HTTP. We can use NodeJS to create Web servers since they use HTTP. But in this case, NodeJS acts as an API which exposes an HTTP interface to interact with it.
I have a simple Angular 4 project served by Express. When I tried to fetch my site using Googlebot, it just showed a blank page (the innerHTML of AppRoot). I thought Google claimed its bots support Angular 4 / JS websites?
If this is still issue, is server side rendering using Angular Universal really the best solution? Like I have to set up another server that serves the server-side rendered app in addition to the main server that serves the normal client-side rendered app? And if it is, how do I tell googlebot to go to the port for the server-side rendered app and normal http traffic to go to the port for the client-side rendered app? Aren't crawlers http traffic?
The issue is not Angular4 specific. Any data generated dynamically by javascript will show first as blank, and then load its content. I assume you are looking at google page speed Insights.
To see what google see:
comment out your external css
comment out your external js
This will be google initial view. After that google will fetch the external files, run your javascript and render the page. Google page speed will penalize you for any changed pixels above the fold before and after fetching the external assets.
Angular Universal (or any server side rendering as this is not an angular issue) will solve that problem.
Hope that helps.
I am using Nodejs with AngularJS for my backoffice application.
It stays on
http://localhost:3000/#!/
But what I need is, this url points to my frontend, and a subdomain like
http://backoffice.localhost:3000/#!/
opens my backoffice.
I tried some nodejs libraries like subomain, but I couldn't target the static files.
What is the best approach?