New to NextJS Migrating from Blazor, integrating with existing web api
Answered
Transvaal lion posted this in #help-forum
Transvaal lionOP
hello there
i recently started looking deeper into the javascript ecosystem and wanted to look at web development (frontend to be specific) as there are tons of frameworks ive talked to some other engineers and recommended me to take a look at nextjs so now iam here
breakdown of what i have already done:
- i have a web api done in a other language (C# .NET 8)
- i have a frontend web app done in a other language (C# Blazor WASM)
- created nextjs template app using https://nextjs.org/docs/getting-started/installation
what i need help with:
- getting started to be able to communicate between C# web api and nextjs frontend app
tooling available:
- all jetbrains IDEs and team tools
- staging prod and test server
- CI/CD server
actual question:
i created a template app as stated above using the latest versions available
to now communicate with my existing web api i face some issues as i dont know how i can use my C# Contract project (.NET 8 class library with requests/response records and a static class definind the endpoints available) to create a api client for nextjs to be used for calling the api using the existing contract project
second question:
iam used to have everything being webassembly (WASM) as far as ive seen nextjs works diffrently there.. how do i know per page/component what will be calculated on client side and what on server side before its send to the client (client here refers the browser of the machine making the request to the web server (likely being kestrel or YARP))?
third question:
are there commandline tools available to generate a nextjs app from existing blazor webassembly code? some sort of migrator? ive been googleing that but didnt found anything regarding that but i aim to make my switch as easy as possible
i recently started looking deeper into the javascript ecosystem and wanted to look at web development (frontend to be specific) as there are tons of frameworks ive talked to some other engineers and recommended me to take a look at nextjs so now iam here
breakdown of what i have already done:
- i have a web api done in a other language (C# .NET 8)
- i have a frontend web app done in a other language (C# Blazor WASM)
- created nextjs template app using https://nextjs.org/docs/getting-started/installation
what i need help with:
- getting started to be able to communicate between C# web api and nextjs frontend app
tooling available:
- all jetbrains IDEs and team tools
- staging prod and test server
- CI/CD server
actual question:
i created a template app as stated above using the latest versions available
to now communicate with my existing web api i face some issues as i dont know how i can use my C# Contract project (.NET 8 class library with requests/response records and a static class definind the endpoints available) to create a api client for nextjs to be used for calling the api using the existing contract project
second question:
iam used to have everything being webassembly (WASM) as far as ive seen nextjs works diffrently there.. how do i know per page/component what will be calculated on client side and what on server side before its send to the client (client here refers the browser of the machine making the request to the web server (likely being kestrel or YARP))?
third question:
are there commandline tools available to generate a nextjs app from existing blazor webassembly code? some sort of migrator? ive been googleing that but didnt found anything regarding that but i aim to make my switch as easy as possible
Answered by Toyger
not sure that in your case nextjs is good choice.
it's fullstack framework, so to use your api you basically will have nextjs as middleman which is a bit redundant but still viable.
so your questions
1. you can use either fetch or axios to run queries to your api endpoints, you need to do it in server components and server actions, it's basically server rendering
2. as mentioned above server components/actions are server side, but you better read docs about it to figure out.
theoretically you can also run queries to your API from client components and it will be client browser request, so you need to keep in mind CORS, and client components will be rendered in browser so this request will not be hydrated(server-rendered)
3. Doubt that something like that exist.
it's fullstack framework, so to use your api you basically will have nextjs as middleman which is a bit redundant but still viable.
so your questions
1. you can use either fetch or axios to run queries to your api endpoints, you need to do it in server components and server actions, it's basically server rendering
2. as mentioned above server components/actions are server side, but you better read docs about it to figure out.
theoretically you can also run queries to your API from client components and it will be client browser request, so you need to keep in mind CORS, and client components will be rendered in browser so this request will not be hydrated(server-rendered)
3. Doubt that something like that exist.
4 Replies
Toyger
not sure that in your case nextjs is good choice.
it's fullstack framework, so to use your api you basically will have nextjs as middleman which is a bit redundant but still viable.
so your questions
1. you can use either fetch or axios to run queries to your api endpoints, you need to do it in server components and server actions, it's basically server rendering
2. as mentioned above server components/actions are server side, but you better read docs about it to figure out.
theoretically you can also run queries to your API from client components and it will be client browser request, so you need to keep in mind CORS, and client components will be rendered in browser so this request will not be hydrated(server-rendered)
3. Doubt that something like that exist.
it's fullstack framework, so to use your api you basically will have nextjs as middleman which is a bit redundant but still viable.
so your questions
1. you can use either fetch or axios to run queries to your api endpoints, you need to do it in server components and server actions, it's basically server rendering
2. as mentioned above server components/actions are server side, but you better read docs about it to figure out.
theoretically you can also run queries to your API from client components and it will be client browser request, so you need to keep in mind CORS, and client components will be rendered in browser so this request will not be hydrated(server-rendered)
3. Doubt that something like that exist.
Answer
@Toyger not sure that in your case nextjs is good choice.
it's fullstack framework, so to use your api you basically will have nextjs as middleman which is a bit redundant but still viable.
so your questions
1. you can use either fetch or axios to run queries to your api endpoints, you need to do it in server components and server actions, it's basically server rendering
2. as mentioned above server components/actions are server side, but you better read docs about it to figure out.
theoretically you can also run queries to your API from client components and it will be client browser request, so you need to keep in mind CORS, and client components will be rendered in browser so this request will not be hydrated(server-rendered)
3. Doubt that something like that exist.
Transvaal lionOP
ah i see
so nextjs is more seen as a framework that can go from db-api (backend) up to the ui in one codebase?
so nextjs is more seen as a framework that can go from db-api (backend) up to the ui in one codebase?
@Transvaal lion ah i see
so nextjs is more seen as a framework that can go from db-api (backend) up to the ui in one codebase?
Toyger
yeah, in your case probably reactjs through vite is better solution, but it still depends on how many Server-Side-Rendering do you need in your project, like for SEO purposes, because SSR with vite is a bit harder.
For example I am working right now on a project with external API, and I have some pages that don't have basically dynamic, like main/register/login/about/prcingi/etc... they don't have any user-specific content in a moment of server render for search bots, so they can be pre-generated as static html pages and everything still works fine. but other pages like for example dashboard are fully js, so 0 server-render because in any case we don't need search bots to know about this pages, it's client only page, but it's more like SSG(g for generated).
So still it depends your site, for example if you have some kind of feed that generated on home page then it need proper SSR to render it for search bots, and there you'll probably stuck with same situation as nextjs, on backend you will have nodejs that will be middleman to your API to generate SSR page.
For example I am working right now on a project with external API, and I have some pages that don't have basically dynamic, like main/register/login/about/prcingi/etc... they don't have any user-specific content in a moment of server render for search bots, so they can be pre-generated as static html pages and everything still works fine. but other pages like for example dashboard are fully js, so 0 server-render because in any case we don't need search bots to know about this pages, it's client only page, but it's more like SSG(g for generated).
So still it depends your site, for example if you have some kind of feed that generated on home page then it need proper SSR to render it for search bots, and there you'll probably stuck with same situation as nextjs, on backend you will have nodejs that will be middleman to your API to generate SSR page.