I'm trying to set up a basic component that is rendered on the server and the client. The component is populated with data from a JSON API. I've got this working on the client-side by loading my data in componentDidMount and calling this.setState when it has loaded.
The problem I have is that the data isn't loaded on the server. How do I get the initial data into the server-rendered version of my component?
https://github.com/rackt/react-router/blob/latest/docs/guides/advanced/ServerRendering.md is very vague about this:
For data loading, you can use the renderProps argument to build
whatever convention you want--like adding static load methods to your
route components, or putting data loading functions on the
routes--it's up to you.
Do you have an example anywhere of how to do this? It seems like a very basic thing for a universal application to want to do!
Yup - we have https://github.com/rackt/async-props that provides a library for dealing with async data between server and client, and provides an example for doing so. If you're using a Flux framework, you'll want to make appropriate adjustments, but the basic approach will be quite similar.
Related
I am working on an angular 6 project and I need to know if I can get a database from a public api but also from an in-memory database?
Which means for example show movies from a public api but also be able to add my own movies so that it shoes on my website.
I just want to create a basic database that when I reload the page, the database disappears.
If yes, how can i do so without using backend?
Thanks
Ava
I really don't know if I understood your question properly but I thought of sharing some info which might be useful for you.
You can use the browser's local storage to temporarily save your data. And if you want your database to disappear when you reload, you can manipulate with logic to clear your local storage from the code. Like, onInit of the component, clear local storage.
Use json-server if you want a small data base. It actually serves as a real database
There are some public api sites, where you can fetch data, and even mock post and put requests too. For instance json placeholder
To be able to extend that data, you need the specific implementation to always extend the result with your "in-memory database". So for instance in a component, you store your data in a property, and in the http communication listeners do something like this:
this.http.get('placeholder-api',{someBodyData}).subscribe(
response => {
results = [...response, ...myInMemoryDbArray]
}
);
If you post the specific function you want to implement and has difficulties with, can help you more.
I think you can use firebase. For tutorial https://www.tutorialspoint.com/firebase/ .
I'm pretty freshly learning JavaScript, Node.JS and HTML. Planning to use ExpressJS to display content as follows:
`var app = express();
app.use(express.static(__dirname + '/public'))`
I want to have JSON formatted Data sent to the HTML page and want the user to be able to do requests to an API (that returns more JSON-Formatted Data, yay) and have the results displayed - if possible without reloading the page.
As I said I'm pretty new to this - so any resources or hints would be very appreciated.
On a sidenote, I am trying to stay at NodeJS because I want to access a MySQL database later on.
This is a very general question, but here is some information to get you started in the right direction.
Planning to use ExpressJS to display content as follows:
var app = express();
app.use(express.static(__dirname + '/public'))
Okay, but this doesn't explain how you are going to serve content. If you are just using Express to serve static documents, then this will work. It may be worth your time to get started using a view engine such as EJS or Jade. EJS is usually easier to learn because there is no special syntax, you just wrap plain javascript in <% %> tags. There are a multitude of tutorials on using both of these view engines.
I want to have JSON formatted Data sent to the HTML page
If you are sending static content, you need do nothing more than make a fetch request or xhr request. I recommend getting familiar with fetch first, as it is generally easier to work with than xhr.
With the promise that is returned from that fetch request, you can have some javascript loop through the information and create HTML elements using document.createElement() and insertBefore(). Using this method will not require a page refresh.
Of course, this is just how you would do it with Vanilla JS, and for something like this, there is no need to go bigger. But eventually it becomes easier to use a library like React to create an SPA.
I want to access a MySQL database later on.
Learning how to render json into a page now will likely simplify this step later on, since the Node Mysql driver returns a plain javascript object as a result of its queries, which can easily be sent to the client using something along the lines of res.send(JSON.stringify(results).
There are a multitude of tutorials and github repos on these topics. I recommend doing a little bit of research before diving in, but it all comes down to how much time you spend writing code and debugging.
I have always worked with Web APIs, so I don't know how to handle this very basic problem in .NET Core MVC (I am only familiar with MVC conceptually). My problem:
I need a user to select an option from a dropdown on the front end and then show some data based on the option (after fetching it).
If I were writing an SPA consuming an API, I would simply make a call to the backend to get the data and then generate the html to display it on the front end.
How is this handled in MVC? Isn't the convention to return entirely new views? How are things like these handled?
I just need a pointer in the right direction conceptually - I can figure out the code.
Edit: Should I just pretend it's an SPA despite it being a view and create an API endpoint in the same app that provides the view and consume it from the cshtml?
It works exactly the same way. You make an AJAX call to fetch some data. You can either return the data directly, and utilize JS to render the HTML or return HTML directly. Either way, you use the AJAX callback to replace the appropriate content on the page.
Even in older ASP.NET MVC projects it worked this way, though you basically had to decide whether you were going to use an MVC controller or a Web Api controller to do the work. Either would work, but there were advantages/disadvantages to each approach. MVC/Web Api could always coexist in the same project.
In ASP.NET Core, the difference is purely semantic. There's really no such thing as MVC and Web Api anymore - just ASP.NET Core. A controller is a controller is a controller, so just add an endpoint and go to town.
I need to know how data returned from the Spring MVC REST controller attaches to html page and what the Spring configuration do we have to do this.
The browser just prints this data out without view and that's all.
I have some Spring configurations to do it but unfortunatelly it doesn't work.
First, you have to create a spring web-mvc application with a correct configuration that will run without errors. There are plenty of tutorials on how to do it. After that, if you wish to get json data using your rest controllers, the most popular way to do it is by using javascript and the JQuery library. Using them you can make ajax calls to your api. There are plenty of tutorials on how to achive this again. Finnaly, your data will be on the client side and you can manage them (render them in your html-dom etc) using javascript and JQuery again.
From what I've read, one would generally use a global variable so that all controllers have access to some data.
Is there an "best-practice" way of accessing global data in the view templates? The use case would be for storing semi-static data like the website's brandname or location address. If in the future that data changes (ie, rebranding), it would be trivial to update the view to reflect those changes.
This thread suggests that using $rootScope is bad, and a better way would be to use a Service. However, in my case this gets messy because I have to mentally remember to include the service and create a scope var in each controller that has a template that will reference the static data.
I've seen suggestions of storing this data in a database, and then querying for it when needed. But that advice tends to be for server-side frameworks, and I would rather not do a GET query to the server just to grab static data in Angular.
I could leave it hardcoded as I have it now, and just run a grep to search and update whatever templates.
Is there a way to assign static data to variables once, and then have it be accessed in the templates without going through hoops? And all the while following Angular best practices? Or perhaps hardcoding the the easiest/cleanest approach?
Service Factory behave like singleton, when injected in different module you actually access the same data so it works perfectly for communication between controller.
Each component dependent on a service gets a reference to the single instance generated by the service factory.
If you want access those data in your template, just include the object in your scope, display. This will automatically implement two-way binding and is a good practice for MVC pattern.
To know the difference between Service and Factory : angular.service vs angular.factory
But try to avoid as much as possible to use global variable :D
BUT
This apply in a perfect world with perfect developer ... I love using a global variable like SETTINGS (uppercase to make it sounds constant) and which include some data required before angular initialization for exemple.
Would work well for such data like title and stuff like you have. However, you still need to add it manually in your scope (which for a title would be ... once ? Yeah seems ok)