javascript - Multiple pages share the same navigation. How can this shared navigation be introduced to avoid duplication?

Question

A very common scenario. In the past, PHP's include was used to introduce it. What methods can be used at the front desk to do this?
The libraries currently introduced include jQuery and Webpack

Things that come to mind are:

1. Send an Ajax request and put the requested page into the container:

   $.get("header.html",function(data){
      $("#header").html(data);
   });

2. Make the navigation a jQuery component and initialize each page used

   `$("#header").initHeader()`
   

Are my two ideas correct?
What other methods are there?
And what are the commonly used methods?

Answer 1

There should still be a template file. It feels weird to implement it using jq components...

Answer 2

Write nav into public js and initialize it there.
No need to initialize in every page.